点击Reset按钮后h1标签内容未改变的技术咨询

用户提供的原始代码 #

HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>Score Keeper</title>
</head>
<body>
    <h1><span id="d1">0</span> to <span id="d2">0</span></h1><br>
    <p>Playing To : 5</p><br>
    <input type="number">
    <button id="one">Player One</button>
    <button id="two">Player Two</button>
    <button id="reset">Reset</button>
</body>
<script type="text/javascript" src="score.js"></script>
</html>

JavaScript代码

var one = document.getElementById("one");
var two = document.getElementById("two");
var reset = document.getElementById("reset");
var i = 0;
var j = 0;

one.addEventListener("click", function() {
    i = i + 1;
    document.querySelector("#d1").textContent = i;
});

two.addEventListener("click", function() {
    j = j + 1;
    document.querySelector("#d2").textContent = j;
});

reset.addEventListener("click", function() {
    document.getElementsByTagName("h1").innerHTML = "<h1>0 to 0</h1>";
}); 
// it doent work when i add textcontent in place of inner html > why does content of h1 doesnot change when i click reset button.

问题原因拆解 #

伙计，我帮你找出两个关键问题，正是它们导致Reset按钮失效：

1. 错误的DOM元素获取方式

你用document.getElementsByTagName("h1")获取的是HTMLCollection（DOM元素集合），这是一个类数组对象，不是单个的h1元素。集合本身并没有.innerHTML或.textContent属性，所以你直接调用这些方法根本不会对页面产生任何影响。

要获取页面上的单个h1元素，你可以用这两种更靠谱的方式：

• 取集合的第一个元素：document.getElementsByTagName("h1")[0]
• 更简洁的querySelector：document.querySelector("h1")（它会返回匹配选择器的第一个元素）

2. 内容赋值的逻辑错误

你写的innerHTML = "<h1>0 to 0</h1>"是转义了HTML标签，就算选对了元素，最终会在h1里面显示<h1>0 to 0</h1>的文本，而不是把h1的内容改成“0 to 0”。而且原页面的h1是包含两个<span>标签的，直接替换整个文本其实不如重置两个span的内容更贴合你的计分逻辑。

另外，你还遗漏了重置计数变量i和j，不然点击Player One/Two会从之前的数字继续累加，这也是常见的小疏漏。

修复后的代码 #

这里给你两种修复方案，按需选择：

方案1：直接重置h1的文本内容（简单粗暴）

reset.addEventListener("click", function() {
    // 先重置计数变量
    i = 0;
    j = 0;
    // 获取单个h1元素并修改内容
    document.querySelector("h1").textContent = "0 to 0";
});

方案2：重置两个span的内容（和原计分逻辑保持一致）

这个方案更推荐，因为它和Player One/Two的点击逻辑统一，也能保留h1内部的span结构：

reset.addEventListener("click", function() {
    // 重置计数变量
    i = 0;
    j = 0;
    // 分别重置两个span的内容
    document.querySelector("#d1").textContent = i;
    document.querySelector("#d2").textContent = j;
});

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