HTML/JS入门：点击按钮加分后如何更新scoretext的innerHTML？

你目前的问题是：仅在页面初始化时把score的值渲染到了scoretext标签里，点击按钮时虽然修改了score变量，但没有重新更新DOM元素的内容，所以页面上看不到分数变化。

给你两种简单的修复方案：

方案1：直接在按钮点击事件中更新DOM #

修改按钮的onclick属性，在给score加1后，立刻同步更新scoretext的内容：

<!DOCTYPE html>
<html>
    <head>
<style>
    body {
        background-color: black;
        color: white;
    }

</style>
    </head>
<body>
<p id="scoretext"></p>
<script> 
var score = 0;
document.getElementById("scoretext").innerHTML = score; 
</script> 
<button onclick="score += 1; document.getElementById('scoretext').innerHTML = score;">Click</button> 
</body>
</html>

方案2：封装成函数（更推荐，适合后续扩展） #

把分数更新的逻辑封装成单独的函数，代码结构更清晰，也方便后续添加加分动画、分数上限判断等功能：

<!DOCTYPE html>
<html>
    <head>
<style>
    body {
        background-color: black;
        color: white;
    }

</style>
    </head>
<body>
<p id="scoretext"></p>
<script> 
var score = 0;
// 初始化显示分数
document.getElementById("scoretext").innerHTML = score; 

// 封装分数更新函数
function addScore() {
    score += 1;
    // 更新DOM显示
    document.getElementById("scoretext").innerHTML = score;
}
</script> 
<button onclick="addScore();">Click</button> 
</body>
</html>

核心逻辑：每次修改score变量后，必须主动将新值赋值给目标DOM元素的innerHTML（或更安全的textContent），才能让页面同步显示更新后的分数。

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