Rock Paper Scissors游戏胜负判定与分数更新功能故障排查求助

嘿，我仔细看了你的石头剪刀布游戏代码，发现了几个导致胜负文本显示和分数更新失效的关键问题，下面逐一拆解并给出修复方案：

1. DOM选择器使用错误（核心问题） #

你在computerWins()、playerWins()和tied()函数里，错误地给querySelector添加了[0]索引——querySelector返回的是匹配到的单个DOM元素，不是元素集合，不需要索引取值。另外computerWins()里还写错了API名称：getElementByClassName应该是getElementsByClassName（少了字母s），不过更推荐用querySelector来直接定位单个元素，更简洁不易出错。

错误代码示例（computerWins函数）： #

function computerWins(){
  computerScore++;
  score[0] = computerScore;
  let celebrationText = document.querySelector('.winner')[0];
  celebrationText.textContent = "Computer Wins";
  document.getElementByClassName('comp-score')[0].textContent = computerScore;
}

修复后的代码： #

function computerWins(){
  computerScore++;
  score[1] = computerScore; // 这里顺便修正score数组的索引，score[1]对应电脑分数
  let celebrationText = document.querySelector('.winner');
  celebrationText.textContent = "Computer Wins";
  document.querySelector('.comp-score').textContent = computerScore;
}

2. Score数组索引逻辑错误 #

你定义的score数组是[playerScore, computerScore]，但在computerWins()里错误地把电脑分数赋值给了score[0]（这是玩家分数的位置），虽然这个错误暂时不影响分数显示，但会导致score数组的数据不一致，修复时改成score[1] = computerScore；同理playerWins()里的score[0] = playerScore是正确的，可以保留。

3. 初始变量类型不必要的数组定义 #

一开始你把playerCurrentHand和computerCurrentHand定义成了数组：

let playerCurrentHand = [playerOptns[1]];
let computerCurrentHand = [computerOptns[0]];

虽然后面的changeToXxx函数会把它们改成字符串类型，但初始的数组类型可能在极端情况下引发判断问题，建议直接定义为字符串：

let playerCurrentHand = playerOptns[1];
let computerCurrentHand = computerOptns[0];

完整修复后的核心函数代码 #

function computerWins(){
  computerScore++;
  score[1] = computerScore;
  let celebrationText = document.querySelector('.winner');
  celebrationText.textContent = "Computer Wins";
  document.querySelector('.comp-score').textContent = computerScore;
}
function playerWins() {
  playerScore++;
  score[0] = playerScore;
  let celebrationText = document.querySelector('.winner');
  celebrationText.textContent = "Player Wins";
  document.querySelector('.play-score').textContent = playerScore;
}
function tied(){
  let celebrationText = document.querySelector('.winner');
  celebrationText.textContent = "No Winner";
}

把这些修复点应用到你的代码里，胜负文本显示和分数更新功能就能正常工作了。测试的时候可以多点击几次不同的出拳按钮，验证分数是否正确累加，胜负文本是否对应切换~

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