如何点击按钮时让JavaScript变量的变化在页面显示？

数据老陈

2026-8-25

问题：点击按钮修改score后页面未同步更新

你的代码里，document.write(score)仅在页面首次加载时执行一次，将初始的score值输出到页面。当点击按钮调用subtractOne()或addOne()时，虽然score变量的值确实改变了，但页面不会自动重新执行document.write来更新显示，所以看不到变化。另外，用setInterval配合document.write是错误的做法——页面加载完成后调用document.write会清空当前页面内容，完全不符合需求。

解决方案

核心思路是：用一个固定的HTML元素来展示分数，每次修改score变量后，手动更新这个元素的内容。

步骤1：添加显示分数的HTML元素

在按钮之间添加一个用于展示分数的元素（比如<span>），给它设置唯一ID方便JS获取：

<span id="scoreDisplay">1</span>

步骤2：修改JS函数更新页面显示

每次修改score变量后，通过ID获取显示元素，更新它的文本内容：

function subtractOne() {
    score--;
    document.getElementById('scoreDisplay').textContent = score;
}
function addOne() {
    score++;
    document.getElementById('scoreDisplay').textContent = score;
}

完整修改后的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Score Counter</title>
    <script>
        let score = 1;
        function subtractOne() {
            score--;
            document.getElementById('scoreDisplay').textContent = score;
        }
        function addOne() {
            score++;
            document.getElementById('scoreDisplay').textContent = score;
        }
    </script>
 </head>
 <body>
    <button id="subtractOne" onclick="subtractOne()">Subtract One</button>
    <span id="scoreDisplay">1</span>
    <button id="addOne" onclick="addOne()">Add One</button>
</body>
</html>