猜谜游戏。 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>

Answer 1

使用迭代器来减少混乱

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++;
}

如果这不是您正在寻找的解决方案，请您在 cmets 中纠正它。说真的，具体要求是什么？

Answer 2

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

试试这个：

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

Answer 3

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>

Answer 4

从提交按钮的 addEventListener 中取出 let Trys = 3，因为每次点击提交按钮时尝试变为 3

let tries = 3;
const btn = document.querySelector('.btn')
const result = document.querySelector('.output')
let num = 4 // guessed number . 
btn.addEventListener('click', function() {
// let tries = 3; it make tries = 3 on every click so when  you click on   submit tries become 3 and at the bottom ```tries = tries - 1;``` it become 2 and again the process continue 
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 = ''
})

在此代码中，您还可以制作重试按钮和