If语句在控制台运行正常但页面失效（关联select值的分数计数器问题）

问题根因 #

• 胜负判断逻辑仅在页面加载时执行一次，后续用户修改分数、调整获胜目标分时都不会重新触发判断，自然看不到效果。页面刚加载时两个分数均为0，默认获胜分是3，判断条件不满足，这段逻辑直接被跳过。你在控制台手动运行代码时已经是分数达标的状态，所以能命中逻辑。
• HTML中的加减分按钮未配置对应id，JS代码中scoreOneUp/scoreOneDown/scoreTwoUp/scoreTwoDown四个变量实际为null，哪怕逻辑触发了也无法操作对应按钮。
• 第二个判断分支中变量名拼写错误：scoresTwo/scoresOne不存在，执行时会抛出引用错误，阻断逻辑运行。

修复方案 #

第一步：补全HTML按钮id #

<div class='player'>
<button id='scoreOneUp' class='up'>+</button>
<button id='scoreOneDown' class='down'>-</button>
<span id='scoreOne'>0</span>
</div>

<div class='player'>
    <button id='scoreTwoUp' class='up'>+</button>
    <button id='scoreTwoDown' class='down'>-</button>
    <span id='scoreTwo'>0</span>
</div>

第二步：封装胜负判断函数，在合适的时机调用 #

把原本的胜负判断逻辑封装为独立函数，每次修改分数、调整获胜目标分后都调用一次即可：

const scoreOne = document.querySelector('#scoreOne');
const scoreTwo = document.querySelector('#scoreTwo');
const scoreOneUp = document.querySelector('#scoreOneUp');
const scoreOneDown = document.querySelector('#scoreOneDown');
const scoreTwoUp = document.querySelector('#scoreTwoUp');
const scoreTwoDown = document.querySelector('#scoreTwoDown');
const reset = document.querySelector('#reset');
const points = document.querySelector('#points');
let winningScore = 3;

// 封装独立的胜负判断函数
function checkWin() {
  const s1 = parseInt(scoreOne.innerText);
  const s2 = parseInt(scoreTwo.innerText);
  if (winningScore === s1) {
    scoreOne.style.color = 'green';
    scoreTwo.style.color = 'red';
    scoreOneUp.disabled = true;
    scoreTwoUp.disabled = true;
    scoreOneDown.disabled = true;
    scoreTwoDown.disabled = true;
  } else if (winningScore === s2) {
    // 修正拼写错误的变量名
    scoreTwo.style.color = 'green';
    scoreOne.style.color = 'red';
    scoreOneUp.disabled = true;
    scoreTwoUp.disabled = true;
    scoreOneDown.disabled = true;
    scoreTwoDown.disabled = true;
  }
}
    
points.addEventListener('change', function() {
  winningScore = parseInt(this.value);
  // 调整获胜分后也需要判断是否已经满足获胜条件
  checkWin();
});

scoreOneUp.addEventListener('click', function() {
  scoreOne.innerText = parseInt(scoreOne.innerText) + 1;
  // 修改分数后调用判断
  checkWin();
});

scoreOneDown.addEventListener('click', function() {
  if (parseInt(scoreOne.innerText) > 0) {
    scoreOne.innerText = parseInt(scoreOne.innerText) - 1;
    // 修改分数后调用判断
    checkWin();
  }
});

scoreTwoUp.addEventListener('click', function() {
  scoreTwo.innerText = parseInt(scoreTwo.innerText) + 1;
  // 修改分数后调用判断
  checkWin();
});

scoreTwoDown.addEventListener('click', function() {
  if (parseInt(scoreTwo.innerText) > 0) {
    scoreTwo.innerText = parseInt(scoreTwo.innerText) - 1;
    // 修改分数后调用判断
    checkWin();
  }
});

reset.addEventListener('click', function() {
  scoreOne.innerText = 0;
  scoreTwo.innerText = 0;
  // 重置时还原分数颜色
  scoreOne.style.color = 'initial';
  scoreTwo.style.color = 'initial';
  scoreOneUp.disabled = false;
  scoreOneDown.disabled = false;
  scoreTwoUp.disabled = false;
  scoreTwoDown.disabled = false;
});

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