CODEWITHSUNDEEP
javascriptif-statement
kettlechips
kettlechips

Reputation: 13

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.

Editing to mention that winningScore is default set to 3 but is subject to change upon a select 'change' event. const points is a select html element with 3 options with values of 3, 5, and 7.

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;
});
<h1>Scorekeeper</h1>

<button id='reset'>Reset Scores</button>

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

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


<label for='points'>
    Play until:
  <select name='points' id='points'>
    <option value='3' selected>3</option>
    <option value='5'>5</option>
    <option value='7'>7</option>
    <option value='9'>9</option>
  </select>
  </label>

Thank you in advance.

Upvotes: 1

Views: 110

Answers (1)

StarshipladDev
StarshipladDev

Reputation: 1145

<head>
<style>
  body{
    width:100%;
    height:100%;
    background-color:gray;
    text-align: center;
  }
  .Section{
    width:15%;
    padding:3%;
    min-height:90%;
    background-color:darkgray;
    border-radius:5%;
    display:inline-block;
  }
  .Score{
  padding-top:20%;
    
  }
  .button{
    background-color:blue;
    border-radius:25%;
    padding: 2em;
    width:2em;
  }
  .yellow{
    background-color:yellow
  }
  .orange{

    background-color:orange  
  }
  .red{
  
    background-color:red
  }
  
</style>
</head>
<body>
<div id="body">
  <div class="Section">
    <div id="scoreOneUp" class="button"> /\
    </div>
    <div class="button yellow">
    Player 1
    </div>
    <div id="scoreOne" class="button yellow"> 0
    </div>
    <div id="scoreOneDown" class="button"> \/
    </div>
  </div>
  
  <div class="Section Score">
    <div id="points" class="button orange"> 3
    </div>
    <div id="reset"  class="button red" > Reset
    </div>
  </div>
  <div class="Section">
  <div id="scoreTwoUp" class="button"> /\
    </div>
    <div class="button yellow">
    Player 2
    </div>
    <div id="scoreTwo" class="button yellow"> 0
    </div>
    <div id="scoreTwoDown" class="button"> \/
    </div>
  </div>
</div>
<script>
  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');

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

  function testScores(){
  
    let winningScore = 3;
    if (winningScore == parseInt(scoreOne.innerText)) {
      scoreOne.style.color = 'green';
      scoreTwo.style.color = 'red';
      scoreOne.disabled = true;
      scoreTwo.disabled = true;
    } else if (winningScore == parseInt(scoreTwo.innerText)) {
      scoreTwo.style.color = 'green';
      scoreOne.style.color = 'red';
      scoreOne.disabled = true;
      scoreTwo.disabled = true;
    }
  }


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

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

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

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

  reset.addEventListener('click', function() {
    scoreOne.innerText = 0;
    scoreTwo.innerText = 0;
    scoreOne.disabled = false;
    scoreTwo.disabled = false;
  });
</script>
</body>

All Javascript code, unless called by a listener, will run once. By not putting your checker function in a function that can be called each time the score changes, it would always check the score once and never repeat. Therefore, when you posted it into console, it was checking the scoreat the time, but it would run when both scores were 0 when it was put into your html body.

Upvotes: 1

Related Questions