gpt4 book ai didi

javascript - 输入类型上的 getElementById.value 返回未定义

转载 作者:行者123 更新时间:2023-11-28 12:23:01 28 4
gpt4 key购买 nike

我正在尝试提醒输入类型的值。该警报给我“未定义”。

我尝试过查看其他一些帖子,但没有成功。

我的代码:

<!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 ,然后抬头valuenull抛出错误(阻止所有其余分步代码运行,但不阻止创建 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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com