Evaluate if statements in javascript

Question

So I'm following the modern JavaScript from the beginning by brad traversy, and in the guess number project the app ignores all the conditions in the first if statement and continue. I checked the code in the project file and it's the same, I tried switch statement, I put each condition in a separate if statement, and still doesn't work

let min = 1,
  max = 10,
  winningGuess = 2,
  guessesNum = 3;

// Grab on UI Elements 

const game = document.querySelector('#game'),
  minNum = document.querySelector('.min-num'),
  maxNum = document.querySelector('.max-num'),
  guessInput = document.querySelector('#guess-input'),
  guessBtn = document.querySelector('#guess-btn'),
  message = document.querySelector('.message');

// Assign UI to min and Max

minNum.textContent = min;
maxNum.textContent = max;

// Add an EventListener
guessBtn.addEventListener('click', function() {

  let guess = parseInt(guessInput.value);
  if (isNaN(guess) || guess < min || guess > max) {
    setMessage(`Please enter a Number between ${min} and ${max}`);
  }

  if (guess === winningGuess) {

    gameOver(true, `Great Job ${winningGuess} is the Correct guess, You Won!`)

  } else {

    guessesNum -= 1;

    if (guessesNum === 0) {

      gameOver(false, `Sorry you lost, The correct guess was ${winningGuess}`)

    } else {

      guessInput.style.borderColor = 'red';

      setMessage(`${guess} is not the correct number, You have ${guessesNum} guesses left. Please try again`, 'red');

      guessInput = '';

    }
  }
});

function gameOver(won, msg) {

  let color;

  won === true ? color = 'green' : color = 'red';

  guessInput.disabled = true;

  guessInput.style.borderColor = color;

  message.style.color = color;

  setMessage(msg);

}

function setMessage(msg, color) {

  message.textContent = msg;
  message.style.color = color;
};

<div class="container">
  <h1>The Number Guesser Game</h1>
  <div id="game">
    <p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p>
    <input type="number" id="guess-input" placeholder="Enter Your Guess">
    <input type="submit" value="Submit" id="guess-btn">
    <p class="message"></p>
  </div>

</div>

what was the question? "still doesnt work" isnt much to go on! — Jamiec
– Jamiec, Commented Mar 4, 2021 at 14:22
As you can see from my edit to make your code runable, your code seems to work reasonably well (with one small warning as you're trying to re-assign guessInput = '';). — Jamiec
– Jamiec, Commented Mar 4, 2021 at 14:28
The Snippet of code where the problem is here : ``` let guess = parseInt(guessInput.value); if (isNaN(guess) || guess < min || guess > max){ setMessage(Please enter a Number between ${min} and ${max}); } ``` it just checks this conditions "isNaN(guess)" — Amine Fathi
– Amine Fathi, Commented Mar 4, 2021 at 14:37
If you Put a number That is bigger then 10 it doesn't return the message — Amine Fathi
– Amine Fathi, Commented Mar 4, 2021 at 14:39

Jamiec · Accepted Answer · 2021-03-04 14:42:31Z

Your if statement is absolutely fine, the reason you never see the message "Please enter a Number between ${min} and ${max}" is because you let the code continue, and almost immediately that message is overwritten by a different one. Simply adding a return statement within your if block will solve this problem.

Note I also fixed this line guessInput = ''; which should be guessInput.value = '';

let min = 1,
  max = 10,
  winningGuess = 2,
  guessesNum = 3;

// Grab on UI Elements 

const game = document.querySelector('#game'),
  minNum = document.querySelector('.min-num'),
  maxNum = document.querySelector('.max-num'),
  guessInput = document.querySelector('#guess-input'),
  guessBtn = document.querySelector('#guess-btn'),
  message = document.querySelector('.message');

// Assign UI to min and Max

minNum.textContent = min;
maxNum.textContent = max;

// Add an EventListener
guessBtn.addEventListener('click', function() {

  let guess = parseInt(guessInput.value);
  if (isNaN(guess) || guess < min || guess > max) {
    setMessage(`Please enter a Number between ${min} and ${max}`);
    return; // here
  }

  if (guess === winningGuess) {

    gameOver(true, `Great Job ${winningGuess} is the Correct guess, You Won!`)

  } else {

    guessesNum -= 1;

    if (guessesNum === 0) {

      gameOver(false, `Sorry you lost, The correct guess was ${winningGuess}`)

    } else {

      guessInput.style.borderColor = 'red';

      setMessage(`${guess} is not the correct number, You have ${guessesNum} guesses left. Please try again`, 'red');

      guessInput.value = '';

    }
  }
});

function gameOver(won, msg) {

  let color;

  won === true ? color = 'green' : color = 'red';

  guessInput.disabled = true;

  guessInput.style.borderColor = color;

  message.style.color = color;

  setMessage(msg);

}

function setMessage(msg, color) {

  message.textContent = msg;
  message.style.color = color;
};

<div class="container">
  <h1>The Number Guesser Game</h1>
  <div id="game">
    <p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p>
    <input type="number" id="guess-input" placeholder="Enter Your Guess">
    <input type="submit" value="Submit" id="guess-btn">
    <p class="message"></p>
  </div>

</div>

Thank you so much The problem is solved I actually tried that solution but not at the same place where you put it thank you again

nodeDevcoder · Accepted Answer · 2021-03-04 14:25:39Z

0

Try changing the const to let. You're editing all these later in your code:

let game = document.querySelector('#game'),
      minNum = document.querySelector('.min-num'),
      maxNum = document.querySelector('.max-num'),
      guessInput = document.querySelector('#guess-input'),
      guessBtn = document.querySelector('#guess-btn'),
      message = document.querySelector('.message');

answered Mar 4, 2021 at 14:25

nodeDevcoder

4973 silver badges14 bronze badges

1 Comment

Jamiec Over a year ago

The only place its re-assigning is guessInput = ''; which doesnt actually have much effect on the actual workings of the code

Collectives™ on Stack Overflow

Evaluate if statements in javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related