代码中的问题与您检索输入字段的值的方式有关。您使用的是
nodeValue
属性,这不是获取输入元素值的正确方法。
相反,您应该使用
value
属性来检索输入元素的值。这是更正后的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum Calculator</title>
</head>
<body>
<form>
<input type="number" id="x">
<input type="number" id="y">
<input type="submit" value="Submit" onclick="sum()">
</form>
<script>
function sum() {
// Retrieve the values of the input fields
let x = parseFloat(document.getElementById('x').value);
let y = parseFloat(document.getElementById('y').value);
// Check if the input values are valid numbers
if (!isNaN(x) && !isNaN(y)) {
// Perform the sum
let result = x + y;
alert("The sum is: " + result);
} else {
alert("Please enter valid numbers in both fields.");
}
}
</script>
</body>
</html>
您应该在调用函数时检查输入字段的值(而不是像现在一样在脚本运行时检查一次)。
为此,您可以使用
.value
属性,而不是在元素上使用 nodeValue
:
</head>
<body>
<form>
<input type="number" id="x">
<input type="number" id="y">
<script>
let x = document.getElementById('x');
let y = document.getElementById('y');
function sum(x, y) {
let sum = x.value + y.value;
alert(sum);
}
</script>
<input type="submit" value="submit" onclick="sum(x, y)">
</form>
</body>
但是您还需要将这些值解析为数字:
</head>
<body>
<form>
<input type="number" id="x">
<input type="number" id="y">
<script>
let x = document.getElementById('x');
let y = document.getElementById('y');
function sum(x, y) {
let sum = parseFloat(x.value) + parseFloat(y.value);
alert(sum);
}
</script>
<input type="submit" value="submit" onclick="sum(x, y)">
</form>
</body>