JavaScript计算器脚本不起作用

JavaScript calculator script does't work

本文关键字：不起作用 脚本 计算器 JavaScript      更新时间：2023-09-26

我正在学习javascript。尝试使用 DOM 制作一个简单的计算器。我写了下面的脚本，但我的脚本给出了错误。未捕获的类型错误：无法读取空计算器的属性"值".html：8

这是我的脚本：

    <!DOCTYPE html>
<html>
<head>
    <title>My Calculator</title>
</head>
<body>
    <script type="text/javascript">
        var f_number = document.getElementById("f_number").value;
        var f_number = document.getElementById("s_number").value;
        function calculate(opa)
        {
            if(opa=='+') 
            {
                var result = Number(f_number) + Number(s_number);
            }
            if(opa=='-') 
            {
                var result = f_number - s_number;
            }
            if(opa=='*') 
            {
                var result = f_number * s_number;
            }
            if(opa=='/') 
            {
                var result = f_number / s_number;
            }
            return document.getElementById('res').value = result;
        }
    </script>
    <div class="container">
        <table>
            <tr>
                <td>First Number</td>
                <td><input type="number" id="f_number" ></td>
            </tr>
            <tr>
                <td>Second Number</td>
                <td><input type="number" id="s_number" ></td>
            </tr>
            <tr>
                <td></td>
                <td>
                <input type="submit" value="+" onclick="calculate()" >
                <input type="submit" value="-" onclick="calculate()" >
                <input type="submit" value="*" onclick="calculate()" >
                <input type="submit" value="/" onclick="calculate()" >
                </td>
            </tr>
            <tr>
                <td>Result</td>
                <td><input type="text" id="res"></td>
            </tr>
        </table>
    </div>
</body>
</html>

工作代码的完整示例：

<!DOCTYPE html>
<html>
<head>
    <title>My Calculator</title>
</head>
<body>
    <div class="container">
        <table>
            <tr>
                <td>First Number</td>
                <td><input type="number" id="f_number" ></td>
            </tr>
            <tr>
                <td>Second Number</td>
                <td><input type="number" id="s_number" ></td>
            </tr>
            <tr>
                <td></td>
                <td>
                <input type="submit" value="+" onclick="calculate('+')" >
                <input type="submit" value="-" onclick="calculate('-')" >
                <input type="submit" value="*" onclick="calculate('*')" >
                <input type="submit" value="/" onclick="calculate('/')" >
                </td>
            </tr>
            <tr>
                <td>Result</td>
                <td><input type="text" id="res"></td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        function calculate(opa)
        {
            var f_number = +document.getElementById("f_number").value;
            var s_number = +document.getElementById("s_number").value;
            if(opa=='+')
            {
                var result = f_number + s_number;
            }
            if(opa=='-')
            {
                var result = f_number - s_number;
            }
            if(opa=='*')
            {
                var result = f_number * s_number;
            }
            if(opa=='/')
            {
                var result = f_number / s_number;
            }
            return document.getElementById('res').value = result;
        }
    </script>
</body>
</html>

JavaScript 按照遇到它的顺序执行。

当您这样做时document.getElementById("f_number").value该 DOM 节点尚不存在。所以它返回null，因此是错误消息。

将代码移动到引用的 DOM 节点定义下方，或者在文档就绪或onload上运行代码。

这意味着这些项目没有值：

 var f_number = document.getElementById("f_number").value;
 var f_number = document.getElementById("s_number").value;

您需要在存在值/单击按钮后运行脚本，而不是立即运行。

相关文章：