Why button have to be pressed extra one time to be disabled in Javascript?-CodePudding

this is my first question in stackoverflow. I am making my very first page, where I apply Javascript. I have a little score keeper. Every player has their own score counting and button. Before beginning you can select what you want to play up to. My problem is when counting is over (one player won) buttons has to be disabled, but they disable only after extra one click on them. I don`t understand why. This is my HTML:

<div >
            <div >
                <h1> <span id="firstScore">0</span> to <span id="secondScore">0</span></h1>  
            </div>
            <div >
                <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  role="button""> 1 Player One</button>
            <button > 1 Player Two</button>
            <button >Reset</button>

        </div>

This is my 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}`;
});

I tried to write conditions in another ways: without else, make new one, tried switch, starting count from 1 or -1, and in condition written

if (scoreTwo < chooseScore.value - 1)

or chooseScore.value 1 But it doesn`t work. This is my first try and I hope you will help me with my issue. Thank you very much.

CodePudding user response：

This is an edge-case logic error.

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

else is not appropriate here because there is a case where both blocks of code need to execute. When the score is 4, the if block executes and increments the score to 5, but doesn't disable the buttons immediately because that code is in the else block.

The logic should probably go like this, with two unrelated if blocks:

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

CodePudding user response：

You should do this, you should only check the condition when you have to disable the buttons.

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 >
            <div >
                <h1> <span id="firstScore">0</span> to <span id="secondScore">0</span></h1>  
            </div>
            <div >
                <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  role="button""> 1 Player One</button>
            <button > 1 Player Two</button>
            <button >Reset</button>

        </div>