如何在没有控制台错误的情况下显示网站错误？

Question

我正在创建一个文本转换器网站https://textchanger.netlify.com/，但在尝试显示错误时遇到了问题。我希望在用户尝试转换“无”时显示错误。

确实会显示该错误，并且该方面的一切工作正常，但 Chrome 控制台中有一些错误，我似乎无法调试。

错误：textchanger.js:43 Uncaught TypeError: Cannot read property 'split' of undefined at Scrambler (textchanger.js:43) at HTMLButtonElement.<anonymous> (textchanger.js:80)

如果有人有很棒的想法！

JSfiddle：https://jsfiddle.net/MysteriousDuck/duc0atjz/

//Check if textinput is not empty
function fooBar(text) {
    if (document.getElementById("inputText").value == "") {
        console.log('Can not convert nothing!')
    } else {
        capitalizer()
    }
}
return textArray.join(''); {

}

//Capitalize every odd letter
function capitalizer() {
    if (document.getElementById("inputText").value == "") {
        alertify.error('Can not convert nothing!')
    } else {
        var x = document.getElementById("inputText").value;
        var string = "";
        for (let i = 0; i < x.length; i++) {
            if (i % 2 == 0) {
                string = string + x[i].toUpperCase();
            } else {
                string = string + x[i];
            }
        }
        return string;
    }
}

Answer 1

代码document.getElementById("convertedText").value = scrambler(capitalizer()); 抛出错误。

上面代码中的capitalizer()返回undefined

因为方法内部满足条件alertify.error('Can not convert nothing!')，它什么都不返回，即undefined

然后scrambler 尝试拆分一个等于undefined 的text 参数

Answer 2

错误包含在您的scrambler() 函数中。 每次用户点击Convert按钮不管他们在文本区域中输入的内容都会执行此功能。这是因为您的事件侦听器只是在侦听此转换按钮上的点击，并且对于每次点击它只是根据所述输入运行scrambler() 函数。您需要在此处添加输入验证检查，以解决仅在有效输入上运行的问题。

您的转换按钮侦听器：

convertText.addEventListener('click', function() {
  if (checkbox_1.checked && checkbox_2.checked) {
    console.log("Capitalizing + Scrambling text");
    document.getElementById("convertedText").value = scrambler(capitalizer());
  } else if (checkbox_2.checked) {
    console.log("Scrambling text");
    var text = document.getElementById("inputText").value;
    document.getElementById("convertedText").value = scrambler(text);
  } else if (checkbox_1.checked) {
    console.log("Capitalizing text");
    document.getElementById("convertedText").value = capitalizer();
  }
})

请注意，此事件侦听器中没有输入验证，它假定您的 convertedText textarea 中有一个有效值，所以这就是当用户不输入任何内容时您会收到 undefined 错误的原因要转换即没有要拆分的convertedText

未捕获的类型错误：无法读取未定义的属性“拆分”

希望对您有所帮助！