警报框未显示 Html 输入字段的总和

问题描述 投票:0回答:2
javascript html input alert html-input
2个回答
0
投票

代码中的问题与您检索输入字段的值的方式有关。您使用的是

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>


0
投票

您应该在调用函数时检查输入字段的值(而不是像现在一样在脚本运行时检查一次)。

为此,您可以使用

.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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.