如何使网站错误显示而没有控制台错误?

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

错误包含在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文本区域中的值有效，因此这就是为什么当用户输入要转换的任何内容(即没有要转换的文本(时出现undefined错误的原因

未

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

希望对您有所帮助！

Answer 2

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

capitalizer()在代码上返回undefined

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

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