JavaScript 在函数外定义变量答案

【问题标题】：JavaScript define variable outside functionJavaScript 在函数外定义变量
【发布时间】：2023-03-24 13:50:02
【问题描述】：

我正在尝试创建一个变量，我可以使用 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 而不在调用它时重置它的值？

【问题讨论】：

去掉函数内部的“var”； “var”这个词的基本意思是“创建一个新变量”，这显然不是你想要的。

标签： javascript html variables undefined nan

【解决方案1】：

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。

【讨论】：

【解决方案2】：

试试这个：

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

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

【讨论】：

【解决方案3】：

你可以这样做

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

【讨论】：

【解决方案4】：

您在add() 函数中重置num，这没有多大意义：

var num = num+addnum;

意思是“新建一个变量num，其值为num+addnum，但是等等，你刚刚定义了num，所以……”

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

num += addnum;

或

num = num+addnum;

【讨论】：

优秀。祝你好运。