JavaScript函数未按预期修改变量值的问题求助

嘿，这问题我之前也踩过坑！核心问题出在代码的执行时机上，咱们一步步拆解清楚：

为什么输出是2而不是7？ #

• 页面加载的瞬间，document.write(a)就立刻执行了，这时候你还没点击按钮，add()函数根本没被调用过，a还是初始的2，自然就输出2了。
• 等你点击按钮触发add()后，a确实会变成2+5=7，但这时候页面已经渲染完成了，document.write不会自动重新运行来更新页面内容——它只在页面加载的初始阶段起作用。

怎么改成预期的效果？ #

咱们换个思路，不用document.write，而是通过DOM操作来实时更新页面上的数值。比如给页面加一个专门用来显示结果的元素，点击按钮时直接修改这个元素的内容。

修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <script>
        var a = 2;
        var b = 5;
        function add() {
            a = a + b;
            // 更新页面上的结果显示
            document.getElementById('result').textContent = a;
        }
    </script>
</head>
<body>
    <div>
        <!-- 初始显示a的数值 -->
        <div id="result">2</div>
        <input type="button" value="add" onclick="add()">
    </div>
</body>
</html>

代码说明 #

• 新增了一个带id="result"的<div>，用来展示a的数值，初始就显示2。
• 点击按钮触发add()后，不仅修改了a的值，还通过document.getElementById('result').textContent = a把最新的a值同步到页面上，这样就能看到实时变化啦！

内容的提问来源于stack exchange，提问作者blue2707