JavaScript计算器脚本执行'；行不通_Javascript_Jquery

JavaScript计算器脚本执行'；行不通

javascript jquery

JavaScript计算器脚本执行'；行不通,javascript,jquery,Javascript,Jquery,我正在学习javascript。尝试使用DOM制作一个简单的计算器。我写了下面的脚本，但我的脚本给出了错误。未捕获类型错误：无法读取空计算器的属性“值”。html:8 这是我的剧本： <!DOCTYPE html> <html> <head> <title>My Calculator</title> </head> <body> <script type="text/javascr

我正在学习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>


我的计算器
var f_number=document.getElementById（“f_number”）.value；
var f_number=document.getElementById（“s_number”）.value；
函数计算（opa）
{
如果（opa=='+'）
{
var结果=编号（f_编号）+编号（s_编号）；
}
如果（opa='-'）
{
var结果=f_数-s_数；
}
如果（opa=='*'）
{
var结果=f_数*s_数；
}
如果（opa=='/'）
{
var结果=f_编号/s_编号；
}
return document.getElementById（'res'）。value=result；
}
第一个数字
第二个数字
结果

表示这些项目没有值：

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

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

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

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

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

JavaScript是按照遇到的顺序执行的

当您执行

document.getElementById（“f_number”）.value

时，DOM节点还不存在。因此，它返回

null

，因此返回错误消息

将代码移动到引用的DOM节点定义下方，或者在文档就绪时运行代码，或者按照遇到的顺序执行JavaScript

当您执行

document.getElementById（“f_number”）.value

时，DOM节点还不存在。因此，它返回

null

，因此返回错误消息

将代码移动到引用的DOM节点定义下方，或在document ready或onload上运行代码

工作代码的完整示例：

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


我的计算器
第一个数字
第二个数字
结果
函数计算（opa）
{
var f_number=+document.getElementById（“f_number”）.value；
var s_number=+document.getElementById（“s_number”）.value；
如果（opa=='+'）
{
var结果=f_数+s_数；
}
如果（opa='-'）
{
var结果=f_数-s_数；
}
如果（opa=='*'）
{
var结果=f_数*s_数；
}
如果（opa=='/'）
{
var结果=f_编号/s_编号；
}
return document.getElementById（'res'）。value=result；
}

工作代码的完整示例：

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


我的计算器
第一个数字
第二个数字
结果
函数计算（opa）
{
var f_number=+document.getElementById（“f_number”）.value；
var s_number=+document.getElementById（“s_number”）.value；
如果（opa=='+'）
{
var结果=f_数+s_数；
}
如果（opa='-'）
{
var结果=f_数-s_数；
}
如果（opa=='*'）
{
var结果=f_数*s_数；
}
如果（opa=='/'）
{
var结果=f_编号/s_编号；
}
return document.getElementById（'res'）。value=result；
}

将javascript代码放在前面

我将脚本放在前面。现在，我的结果显示未定义。请将javascript代码放在

之前。现在我的结果显示未定义。请再次查看我的脚本。我添加了onclick=“calculate（）”。给出了相同的错误。我把我的脚本放在了前面。错误消失了。现在我的结果显示未定义。请再次查看我的脚本。我添加了onclick=“calculate（）”。给出了相同的错误。我把我的脚本放在了前面。错误消失了。现在我的结果显示未定义。它有效。我想知道为什么document.getElementById（“f_number”）.value返回

string

类型的值。我们必须使它

float

type。使用

我们将其从

字符串

转换为

浮点

类型感谢您的友好和简单的解释。它很有效。我想知道为什么document.getElementById（“f_number”）.value返回

string

类型的值。我们必须使它

float

type。使用

我们将其从

字符串

转换为

浮点

类型感谢您的友好而简单的解释。