我正在尝试提醒输入类型的值。该警报给我“未定义”。
我尝试过查看其他一些帖子，但没有成功。
我的代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
/* Global Vars */
var firstNumber = document.getElementById('firstNumber').value;
var secondNumber = document.getElementById('secondNumber').value;
var plus = document.getElementById('plus');
var minus = document.getElementById('minus');
var times = document.getElementById('times');
var divide = document.getElementById('divide');
var result = document.getElementById('result');
function cool() {
//var sum = Number(firstNumber) + Number(secondNumber);
alert(secondNumber);
}
</script>
</head>
<body>
<input type="number" placeholder="Getal 1" id="firstNumber" /> <input type="number" placeholder="Getal 2" id="secondNumber" /><br><br>
<input type="text" id="result" disabled /><br><br>
<button id="plus">+</button> <button id="minus">-</button> <button id="times">x</button> <button id="divide">/</button>
<button onClick="cool()">Test</button>
</body>
</html>
最佳答案
如果您查看 Web 控制台，您会发现一个错误:TypeError: Cannot read property value of null ”
这是因为您的代码正在执行以下操作:
var firstNumber = document.getElementById('firstNumber').value;
在元素存在之前，这意味着document.getElementById('firstNumber')给你null ，然后抬头value上null抛出错误(阻止所有其余分步代码运行，但不阻止创建 cool 函数，因为这是在运行任何分步代码之前首先完成的)。该错误阻止 secondNumber曾经获得一个值，因此它保持默认值 undefined您稍后可以在调用 cool 时看到该值.
一般来说，除非您有特殊原因，否则请将脚本放在结束 </body> 之前。标签。特别是，将脚本放入 head 中的业务是一种反模式。所以(但还有更多事情要做，请继续阅读):
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="number" placeholder="Getal 1" id="firstNumber" /> <input type="number" placeholder="Getal 2" id="secondNumber" /><br><br>
<input type="text" id="result" disabled /><br><br>
<button id="plus">+</button> <button id="minus">-</button> <button id="times">x</button> <button id="divide">/</button>
<button onClick="cool()">Test</button>
<script>
/* Global Vars */
var firstNumber = document.getElementById('firstNumber').value;
var secondNumber = document.getElementById('secondNumber').value;
var plus = document.getElementById('plus');
var minus = document.getElementById('minus');
var times = document.getElementById('times');
var divide = document.getElementById('divide');
var result = document.getElementById('result');
function cool() {
//var sum = Number(firstNumber) + Number(secondNumber);
alert(secondNumber);
}
</script>
</body>
</html>
但是:您的代码正在读取页面加载时的输入值(函数外部的代码立即运行)。您可能想在单击按钮时阅读它们。如果是这样，请将读取它们的代码移至 cool 中。功能:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="number" placeholder="Getal 1" id="firstNumber" /> <input type="number" placeholder="Getal 2" id="secondNumber" /><br><br>
<input type="text" id="result" disabled /><br><br>
<button id="plus">+</button> <button id="minus">-</button> <button id="times">x</button> <button id="divide">/</button>
<button onClick="cool()">Test</button>
<script>
function cool() {
var firstNumber = document.getElementById('firstNumber').value;
var secondNumber = document.getElementById('secondNumber').value;
var plus = document.getElementById('plus');
var minus = document.getElementById('minus');
var times = document.getElementById('times');
var divide = document.getElementById('divide');
var result = document.getElementById('result');
//var sum = Number(firstNumber) + Number(secondNumber);
alert(secondNumber);
}
</script>
</body>
</html>
请注意，您的变量不再是全局变量，现在它们很好地位于函数内部。一般来说，避免全局变量，全局命名空间已经远太拥挤了。
关于javascript - 输入类型上的 getElementById.value 返回未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33995193/