Javascript 警告框不显示包含HTML输入字段的总和

发布于02月11日

网站编程新手.我正试着用来自客户端的2个输入域创建一个基本的求和公式.

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <form>
            <input type="number" id="x">
            <input type="number" id="y">
        <script>
            let x = document.getElementById('x').nodeValue;
            let y = document.getElementById('y').nodeValue;

            function sum(x, y) {
                let sum = x + y;
                alert(sum);
            }
        </script>
        <input type="submit" value="submit" onclick="sum(x, y)">
    </form>
    </body>
</html>

我在浏览器中运行我的代码(如果这很重要的话)，当我 Select 两个数字，然后点击提交时，它会显示Alertbox.然而，出现的情况是:

"[对象HTMLInputElement][对象HTMLInputElement]"

我知道正在使用输入元素，但我显然希望我的SUM函数返回两个输入字段的总和.

我不知道我做错了什么.

推荐答案

代码中的问题与如何检索输入字段的值有关.您使用的是nodeValue属性，这不是获取输入元素的值的正确方法.nodeValue返回的内容，请查看docs.

相反，您应该使用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 and try to parse them
            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>