为什么JavaScript中按钮需多点击一次才会被禁用？

我正在制作首个使用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}`;
});

我尝试过多种解决方法：调整条件判断逻辑（去掉else、新增条件、使用switch）、修改初始计数（从1或-1开始），还试过把条件写成if (scoreTwo < chooseScore.value - 1)或者chooseScore.value +1，但都没有效果。这是我第一次尝试JavaScript项目，希望能得到帮助，非常感谢。

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