我正在尝试提醒输入类型的值.警报给我'未定义'.
我试过通过其他一些帖子但没有任何运气.
我的代码:
<!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>
请注意,您的变量不再是全局变量,因为它们很好地位于函数内部.在一般情况下,避免全局变量,全局命名空间已经远远太拥挤了.
| 归档时间： |
|
| 查看次数： |
2129 次 |
| 最近记录： |