While loop in js faulty-CodePudding

I'm creating a guess the number with limited guesses. I have add an incrementor to check the number of times a user submits an answer. Everything seems to work except the loop starts at the final iteration and the games ends on the first try.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="script.js" defer></script>
</head>
<body>
  <div>Guess The Number</div>
  <input type="text" id="input">
  <button id="btn">Check Answer</button>
  <p id="guesses" style="display: inline-block;"></p>
  <p id="hint"></p>
</body>
</html>

const input = document.getElementById("input")
const btn = document.getElementById("btn")
const guesses = document.getElementById("guesses")

const rndmNum = Math.floor(Math.random() * 100)   1;

btn.addEventListener('click', () => {
  if(isNaN(input.value)){
    input.value = "Please type a number"
  } else{
  const hint = document.getElementById("hint");
  let i = 0;
    while (i < 10){
      if(input.value === rndmNum){
        hint.innerHTML = "Congratulations, You guessed correctly!";
        break;
      } else if(input.value > rndmNum){
        hint.innerHTML = "Too High";
      } else{
        hint.innerHTML = "Too low";
      } i  ; guesses.innerHTML = "You have guessed "   i   " times";
    }
    if(i === 10){
      hint.innerHTML = "Game Over! The correct number was "   rndmNum;
    } 
  }
})

I've tried changing the number in the while loop condition. I've tried moving the incrementor in and out of the loops function. I've also tried chatgpt to see if it would work. But no luck. I would really appreciate your help.

CodePudding user response：

I think you're misunderstanding the while loop. The loop will run once for every instance of i from 1 to 10 then stop running when the condition in the while loop is false. Based on what you mentioned you don't want a loop at all but to store the number of guesses into its own variable and increase that variable until you reach your limit.

const rndmNum = Math.floor(Math.random() * 100)   1;

let numberOfGuesses = 0;

btn.addEventListener('click', () => {
  if (isNaN(input.value)) {
    return input.value = "Please type a number";
  }
  
  const hint = document.getElementById("hint");
      
  if (input.value === rndmNum) {
        hint.innerHTML = "Congratulations, You guessed correctly!";
        return;
  } else if (input.value > rndmNum) {
        hint.innerHTML = "Too High";
  } else {
        hint.innerHTML = "Too low";
   }

   numberOfGuesses  ;

   guesses.innerHTML = "You have guessed "   numberOfGuesses   " times";
   
   if (numberOfGuesses === 10) {
      hint.innerHTML = "Game Over! The correct number was "   rndmNum;
   }
})

CodePudding user response：

I believe this is what you were trying to accomplish. The reason why it's not working with the loop because it will run ten times with the click of the button once.

const input = document.getElementById("input")
const btn = document.getElementById("btn")
const guesses = document.getElementById("guesses")
const rndmNum = Math.floor(Math.random() * 100)   1;

//keep track of guess count
let count = 0;

//event listner to check the users answer
btn.addEventListener("click", checkAnswer)

//this function will check for answers or display game over
function checkAnswer(){

    if(count > 9){
        hint.innerHTML = "Game Over! The correct number was "   rndmNum;
    } else if(input.value == rndmNum){
        hint.innerHTML = "Congratulations, You guessed correctly!";
    } else if(input.value > rndmNum){
        hint.innerHTML = "Too High";
    } else {
        hint.innerHTML = "Too low";
    }

    count  
    guesses.innerHTML = "You have guessed "   count   " times";
}