为什么按钮必须多按一次才能在 Javascript 中禁用？答案

【问题标题】：Why button have to be pressed extra one time to be disabled in Javascript?为什么按钮必须多按一次才能在 Javascript 中禁用？
【发布时间】：2022-11-03 23:53:17
【问题描述】：

这是我在stackoverflow中的第一个问题。我正在制作我的第一页，我在其中应用 Javascript。我有一个小记分员。每个玩家都有自己的计分和按钮。在开始之前，您可以选择要播放的内容。我的问题是当计数结束时（一名玩家获胜）按钮必须被禁用，但它们只有在额外单击一次后才会禁用。我不明白为什么。这是我的 HTML：

<div class="main-info">
            <div class="text">
                <h1> <span id="firstScore">0</span> to <span id="secondScore">0</span></h1>  
            </div>
            <div class="choose">
                <label for="choose-score">Playing to</label>
<select name="score" id="score">
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
            </div>
            <button class="buttonOne" role="button"">+1 Player One</button>
            <button class="buttonTwo">+1 Player Two</button>
            <button class="reset">Reset</button>

        </div>

这是我的 Javascript：

const firstPlayer = document.querySelector(".buttonOne");
const firstScore = document.querySelector("#firstScore");
const secondButton = document.querySelector(".buttonTwo");
const chooseScore = document.querySelector("#score");
const secondScore = document.querySelector("#secondScore");

let scoreOne = 0;
firstPlayer.addEventListener("click", function (e) {
  if (scoreOne < chooseScore.value) {
    scoreOne = scoreOne + 1;
  } else {
    firstPlayer.disabled = true;
    secondButton.disabled = true;
  }
  firstScore.innerText = `${scoreOne}`;
  console.log(`this is score of First Player ${scoreOne}`);
});

let scoreTwo = 0;
secondButton.addEventListener("click", function (e) {
  if (scoreTwo < chooseScore.value) {
    scoreTwo = scoreTwo + 1;
  } else {
    firstPlayer.disabled = true;
    secondButton.disabled = true;
  }
  secondScore.innerText = `${scoreTwo}`;
});

我尝试用另一种方式编写条件：没有别的，新建一个，尝试切换，从 1 或 -1 开始计数，并在条件下写入

if (scoreTwo < chooseScore.value - 1)

或选择Score.value +1 但它不起作用。这是我的第一次尝试，我希望你能帮助我解决我的问题。非常感谢。

【问题讨论】：

标签： javascript if-statement button conditional-statements

【解决方案1】：

你应该这样做，

const firstPlayer = document.querySelector(".buttonOne");
const firstScore = document.querySelector("#firstScore");
const secondButton = document.querySelector(".buttonTwo");
const chooseScore = document.querySelector("#score");
const secondScore = document.querySelector("#secondScore");

let scoreOne = 0;
firstScore.innerText =0;
secondScore.innerText=0;
console.log("-> ",parseInt(chooseScore.value ,10))
firstPlayer.addEventListener("click", function (e) {
  scoreOne+=1;  
  firstScore.innerText = `${scoreOne}`;
  if (firstScore.innerText ===chooseScore.value ) { 
    firstPlayer.disabled = true;
    secondButton.disabled = true;
  } 
});

let scoreTwo = 0; 
secondButton.addEventListener("click", function (e) {
    scoreTwo = scoreTwo + 1;  
    secondScore.innerText = `${scoreTwo}`;

    if(secondScore.innerText === chooseScore.value){
      firstPlayer.disabled = true;
      secondButton.disabled = true;
  } 
});

<div class="main-info">
            <div class="text">
                <h1> <span id="firstScore">0</span> to <span id="secondScore">0</span></h1>  
            </div>
            <div class="choose">
                <label for="choose-score">Playing to</label>
<select name="score" id="score">
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
            </div>
            <button class="buttonOne" role="button"">+1 Player One</button>
            <button class="buttonTwo">+1 Player Two</button>
            <button class="reset">Reset</button>

        </div>

【讨论】：

【解决方案2】：

这是一个极端情况的逻辑错误。

  if (scoreOne < chooseScore.value) {
    scoreOne = scoreOne + 1;
  } else {
    firstPlayer.disabled = true;
    secondButton.disabled = true;
  }

else 在这里不合适，因为存在两个代码块都需要执行的情况。当分数为 4 时，if 块执行并将分数增加到 5，但不会立即禁用按钮，因为该代码位于 else 块中。

逻辑应该是这样的，有两个不相关的if 块：

  if (scoreOne < chooseScore.value) {
    scoreOne = scoreOne + 1;
  }
  if (scoreOne >= chooseScore.value) {
    firstPlayer.disabled = true;
    secondButton.disabled = true;
  }

【讨论】：