按钮触发两个span分数同时变更及querySelector获取元素异常求助

咱们先解决第一个核心问题：点击Player One按钮时两名玩家分数同时变化。

问题原因 #

你给#p1按钮绑定了两个独立的click事件监听器：第一个监听器负责累加Player 1的分数，第二个监听器却在累加Player 2的分数。每次点击按钮时，这两个监听逻辑都会触发，自然就导致两个分数一起变动了。

修复方案 #

把两个监听器合并或者移除多余的那个，同时给Player Two按钮绑定对应的分数累加逻辑，修改后的JavaScript代码如下：

var p1button = document.querySelector("#p1"); 
var p2button = document.getElementById("p2"); 
var p1Display = document.getElementById("p1Display"); 
var p2Display = document.getElementById("p2Display"); 
var p1Score = 0; 
var p2Score = 0; 

// 点击Player One只增加Player 1的分数
p1button.addEventListener("click", function() { 
  p1Score++; 
  p1Display.textContent = p1Score; 
}); 

// 点击Player Two只增加Player 2的分数
p2button.addEventListener("click", function() { 
  p2Score++; 
  p2Display.textContent = p2Score; 
});

再来说第二个关于querySelector("#p2Display")返回NodeList的疑问：

这里可能是你不小心混淆了两个API的用法：

• document.querySelector("#p2Display")：只会返回文档中匹配该选择器的第一个DOM元素，因为ID在页面中是唯一的，所以它直接返回单个元素，不是NodeList。
• document.querySelectorAll("#p2Display")：才会返回NodeList（所有匹配选择器的元素集合），哪怕只有一个匹配项。

你遇到的情况大概率是误写了querySelectorAll而非querySelector。另外，针对ID选择器，用getElementById("p2Display")是更高效、更直观的写法，就像你代码里已经在使用的那样。

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