需要帮助修复JavaScript中不明显的错误吗

所以我正在为我的网站做一个基本的计算器，我不断收到一条错误信息，我不知道为什么

我有3个输入框，都是相同的样式。代码基本上验证输入，因此它只能是一个数字。如果是文本或其他字符，则会更改框的边框颜色，并显示错误消息：

函数validateInput（）{
validateArea=document.getElementById（“区域”）.value；
validateLength=document.getElementById（“长度”）.value；
validateWidth=document.getElementById（“宽度”）.value；
如果（isNaN（validateArea））{
area.style.border=“实心2px红色”；
areaInvalid.style.visibility=“可见”；
}否则{
area.style.border=“纯色2px黑色”；
areaInvalid.style.visibility=“hidden”；
}
如果（isNaN（验证长度））{
length.style.border=“实心2px红色”；//断开
lengthInvalid.style.visibility=“可见”；
}否则{
length.style.border=“实心2px黑色”；//断开
lengthInvalid.style.visibility=“隐藏”；
}
如果（isNaN（验证宽度））{
width.style.border=“实心2px红色”；
widthInvalid.style.visibility=“可见”；
}否则{
width.style.border=“纯色2px黑色”；
widthInvalid.style.visibility=“hidden”；
}
}

.inputCalc{
宽度：60%；
边框：2件纯黑；
填充：10px；
}

您依靠

id

成为全球。。。但是，

window.length

具有定义的含义，因此不会被该输入覆盖。。。不要依赖id成为全局变量-事实上，完全避免全局变量。。。在该函数的顶部

var length=document.getElementById（'length'）

etcAlways使用类似于

document.getElementById（）

的函数通过元素的ID访问元素。在if-else块中使用的变量都没有声明，而且您根本不需要它，只需使用input type=“number”相反。@JaromandaX你能给我进一步解释一下并给我举个例子吗？我刚刚开始学习JavaScript，所以其中一些内容对我来说是非常新的。。。在控制台中，键入

window.length

。。。您将看到它有一个数值。。。键入

window.width

。。。这是你的宽度输入元素，你依靠

id

成为一个全球。。。但是，

window.length

具有定义的含义，因此不会被该输入覆盖。。。不要依赖id成为全局变量-事实上，完全避免全局变量。。。在该函数的顶部

var length=document.getElementById（'length'）

etcAlways使用类似于

document.getElementById（）

的函数通过元素的ID访问元素。在if-else块中使用的变量都没有声明，而且您根本不需要它，只需使用input type=“number”相反。@JaromandaX你能给我进一步解释一下并给我举个例子吗？我刚刚开始学习JavaScript，所以其中一些内容对我来说是非常新的。。。在控制台中，键入

window.length

。。。您将看到它有一个数值。。。键入

window.width

。。。它是您的宽度输入元素