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>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 = ''
})
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?
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>