javascript - 猜谜游戏。While 循环

Question

3次尝试后如何停止while循环？

3 次尝试后游戏应该停止并且玩家输了。

let num = 4是正确的数字。
我稍后会更改它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>

标签： javascriptwhile-loop

Answer 1

您的代码不起作用，因为您在每次单击时重新定义按钮事件侦听器内的尝试次数，并且还因为您不需要循环来使其工作。此外，当所有尝试都用完时，您没有定义要做什么的条件。

试试这个：

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