lundi 5 juillet 2021

If statement works in console but doesn't work otherwise (If statement with select value)

This is a very beginner question but I've tried searching for answers and can't find anything. Would appreciate any insight. I know how to get the code to work because I've seen an example with better/proper code. My question is why MY code won't work (even if it's not optimal, I don't understand why it doesn't at least work). It works when I plug it into the console but not when I open the page.

So the program is just a simple Scorekeeper. The buttons are supposed to disable when "play until" score is hit by either player so the game has to be reset to work again. But even when I check the booleans in console and they're returning true and the If Statement runs, it still doesn't work on the page. The button's don't disable.

ex. if winningScore is 5 and scoreOne.innerText is '5' and I put in winningScore === parseInt(scoreOne.innerText) when they're the same number the If Statement actually runs in console.

The code (not sure if I should post the whole thing or cut out the seemingly irrelevant parts):

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;

points.addEventListener('change', function() {
  winningScore = parseInt(this.value);
  });

//this code here !!!! doesn't run
if (winningScore == parseInt(scoreOne.innerText)) {
    scoreOne.style.color = 'green';
    scoreTwo.style.color = 'red';
    scoreOneUp.disabled = true;
    scoreTwoUp.disabled = true;
    scoreOneDown.disabled = true;
    scoreTwoDown.disabled = true;
  } else if (winningScore == parseInt(scoreTwo.innerText)) {
    scoresTwo.style.color = 'green';
    scoresOne.style.color = 'red';
    scoreOneUp.disabled = true;
    scoreTwoUp.disabled = true;
    scoreOneDown.disabled = true;
    scoreTwoDown.disabled = true;
  }

scoreOneUp.addEventListener('click', function() {
  scoreOne.innerText = parseInt(scoreOne.innerText) + 1;
});

scoreOneDown.addEventListener('click', function() {
  if (parseInt(scoreOne.innerText) > 0) {
  scoreOne.innerText = parseInt(scoreOne.innerText) - 1;}
});

scoreTwoUp.addEventListener('click', function() {
  scoreTwo.innerText = parseInt(scoreTwo.innerText) + 1;
});

scoreTwoDown.addEventListener('click', function() {
  if (parseInt(scoreTwo.innerText) > 0) {
  scoreTwo.innerText = parseInt(scoreTwo.innerText) - 1;}
});

reset.addEventListener('click', function() {
  scoreOne.innerText = 0;
  scoreTwo.innerText = 0;
  scoreOneUp.disabled = false;
  scoreOneDown.disabled = false;
  scoreTwoUp.disabled = false;
  scoreTwoDown.disabled = false;
});

Thank you in advance.

Aucun commentaire:

Enregistrer un commentaire