Question

我正在尝试创建一个变量，我可以使用html <input type="number">添加数字我想通过单击带有输入值的按钮来更改变量。通过再次单击该按钮，我希望变量将第二个输入添加到先前更改的数字。
使用以下代码，我获得带有任何输入值的NaN消息，因为var num是未分解的：

<body>
        <span id="number"></span>
        <input id="addnum" type="number" style="width:60px; height:20px;">
        <button onclick='add()'>Add</button>

    <script>
        var num = 0;

        window.onload = function numstart() {
            document.getElementById('number').innerHTML = num;
        }

        function add() {
            var addnum = parseInt(document.getElementById("addnum").value);
            var num = num + addnum;
            document.getElementById('number').innerHTML = num; 
        }
    </script>
</body>

但是如果我在函数中定义var num = 0;，则每次调用函数时都会重置数字。如何在函数中定义变量num而不在调用它时重置它的值？

Answer 1

您正在num功能中重置add()，但它没有多大意义：

var num = num+addnum;

表示＆＃34;创建一个新的变量num，其值为num + addnum，但是等等，你刚刚定义了num，所以...＆＃34;

您想引用全局变量。试试这个：

num += addnum;

或

num = num+addnum;

Answer 2

你可以做这样的事情

<body>
    <span id="number"></span>
    <input id="addnum" type="number" style="width:60px; height:20px;">
    <button onclick='add()'>Add</button>

<script>
    var num = 0;

    window.onload = function numstart() {
        document.getElementById('number').innerHTML = num;
    }

    function add() {
        var addnum = parseInt(document.getElementById("addnum").value);
        num = num + addNum;
        document.getElementById('number').innerHTML = num; 
    }
</script>

Answer 3

发生了棘手的hoisting事情让您感到困惑。您的代码等同于：

function add() {
    var addnum = parseInt(document.getElementById("addnum").value);
    var num;

    num = num + addnum;
    document.getElementById('number').innerHTML = num; 
}

现在很明显为什么num在功能块中未定义，num已声明但未已定义因此它undefined和本地声明阴影外num。所以你当然得到NaN。

修复很简单，只需删除var关键字即可直接使用外部范围num。

Answer 4

试试这个：

<html>
<head>
<script>    
        function add() {                
            document.getElementById('number').innerHTML =  parseInt(document.getElementById('number').innerHTML)+1; 
        }
    </script>
</head>
<body>
        <span id="number"></span>
        <input id="addnum" type="number" style="width:60px; height:20px;">
        <button onclick='add()'>Add</button>       
</body>
</html>

您遇到此问题是因为每次单击时，您的函数都会重新开始，然后完成，并释放其分配的内存空间。

JavaScript定义变量外部函数

4 个答案: