Question

我正在学习javascript。尝试使用DOM制作一个简单的计算器。我写了下面的脚本，但我的脚本给出了错误。 未捕获的TypeError：无法读取null calculator.html的属性'value'：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>

Answer 1

JavaScript按照遇到的顺序执行。

当您执行Destroying the ProtocolHandler DOM节点尚不存在时。所以它返回searcherExecutor，因此返回错误消息。

将代码移到引用的DOM节点定义下面，或者在文档就绪或document.getElementById("f_number").value上运行代码。

Answer 2

工作代码的完整示例：

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

Answer 3

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

width

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

JavaScript计算器脚本不起作用

3 个答案: