CODEWITHSUNDEEP
javascriptwhile-loop
ocko
ocko

Reputation: 95

Guess Game. While loop

How to stop a while loop after 3 tries?

After 3 tries the game should stop and the player loses.

let num = 4 is the correct number.
I will change it later for Math.floor(Math.random)

const btn = document.querySelector('.btn')
const result = document.querySelector('.output')
let num = 4 // guessed number . 

btn.addEventListener('click', function() {
  let tries = 3;

  while (tries > 0) {
    const input = document.querySelector('.input').value
    if (input == num) {
      result.innerHTML = `You win! Correct number was ${num}.`
    } else if (input > num) {
      result.innerHTML = `Your guess is hight!`
    } else if (input < num) {
      result.innerHTML = `Your guess is low!`
    }
    tries = tries - 1;
  }

  document.querySelector('.input').value = ''
})
<input type="number" class="input">
<button class="btn">Submit</button>
<div class="output"></div>

Upvotes: 2

Views: 199

Answers (3)

navnath
navnath

Reputation: 3714

const btn = document.querySelector('.btn')
const result = document.querySelector('.output')
let num = 4 // guessed number . 
let tries = 3;

btn.addEventListener('click', function() {
  let message="";
  if(tries >= 1) {
    const input = document.querySelector('.input').value;
    if (input == num) {
      message = `You win! Correct number was ${num}.`
    } else if (input > num) {
      message = `Your guess is hight!`
    } else if (input < num) {
      message = `Your guess is low!`
    }
    if(tries==1 && input!=num){
      message = "You loss.";
    }
    tries = tries - 1;
  }else{
   message = "limit exceeded.";
  }
  result.innerHTML = message;
  document.querySelector('.input').value = ''
})
<input type="number" class="input">
<button class="btn">Submit</button>
<div class="output"></div>

Upvotes: 0

Ivan
Ivan

Reputation: 1314

Your code wasn't working because you were re-defining the tries amount inside the button event listener on each click and also because you don't need a loop for this to work. Also, you didn't have a condition defined what to do when all tries are used up.

Try this one:

const btn = document.querySelector('.btn')
const result = document.querySelector('.output')

let num = 4 // guessed number . 
let tries = 3;

btn.addEventListener('click', function() {
  
  if (tries > 0) {    
  var input = document.querySelector('.input').value
    if (input == num) {
      result.innerHTML = `You win! Correct number was ${num}.`
    } else if (input > num) {
      result.innerHTML = `Your guess is high!`
    } else if (input < num) {
      result.innerHTML = `Your guess is low!`
    }
    tries--;
    //console.log(tries);
  } else {
    result.innerHTML = `All out of tries.`
  }

  document.querySelector('.input').value = ''
})

Upvotes: 1

Ashwin Chandran
Ashwin Chandran

Reputation: 351

Use an iterator instead and make it less confusing

let limit = 3;
let i = 0;

while (i < limit) {
const input = document.querySelector('.input').value
if (input == num) {
  result.innerHTML = `You win! Correct number was ${num}.`
} else if (input > num) {
  result.innerHTML = `Your guess is hight!`
} else if (input < num) {
  result.innerHTML = `Your guess is low!`
}
  i++;
}

If this is not the solution you are looking for could you please rectify it in comments. Seriously what exactly is the requirement?

Upvotes: 0

Related Questions