¿Cómo detener un ciclo while después de 3 intentos?
Después de 3 intentos, el juego debería detenerse y el jugador pierde.
let num = 4 es el número correcto.
Lo cambiaré más tarde por 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>Su código no funcionaba porque estaba redefiniendo la cantidad de intentos dentro del detector de eventos del botón en cada clic y también porque no necesita un ciclo para que esto funcione. Además, no tenía una condición definida sobre qué hacer cuando se agotan todos los intentos.
Prueba este:
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 un iterador en su lugar y hágalo menos confuso
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++; }Si esta no es la solución que está buscando, ¿podría rectificarla en los comentarios? En serio, ¿cuál es exactamente el requisito?
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>