Increment number of attempts and decrement number of guesses remaining-CodePudding

I am new to JS, I want to the code to display number of attempts made, number of guesses remaining in this simple game. I have gotten lost in the code and I don't know what I am not doing right. The const remainingAttempts returns undefined yet I want to subtract number of attempts made from maxNumberOfAttempts.

const guessInput = document.getElementById("guess");
const submitButton = document.getElementById("submit");
const resetButton = document.getElementById("reset");
const messages = document.getElementsByClassName("message");
const tooHighMessage = document.getElementById("too-high");
const tooLowMessage = document.getElementById("too-low");
const maxGuessesMessage = document.getElementById("max-guesses");
const numberOfGuessesMessage = document.getElementById("number-of-guesses");
const correctMessage = document.getElementById("correct");

let targetNumber;
let attempts = 0;
let maxNumberOfAttempts = 5;

// Returns a random number from min (inclusive) to max (exclusive)
// Usage:
// > getRandomNumber(1, 50)
// <- 32
// > getRandomNumber(1, 50)
// <- 11
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min))   min;
}

function checkGuess() {
  // Get value from guess input element
  const guess = parseInt(guessInput.value, 10);
 attempts = attempts   1;

  hideAllMessages();

  if (guess === targetNumber) {
    numberOfGuessesMessage.style.display = "";
    numberOfGuessesMessage.innerHTML = `You made ${attempts} guesses`;

    correctMessage.style.display = "";

    submitButton.disabled = true;
    guessInput.disabled = true;
  }

  if (guess !== targetNumber) {
    if (guess < targetNumber) {
      tooLowMessage.style.display = "";
    } else {
      tooHighMessage.style.display = ""; //replaced else condition statement
    }

    const remainingAttempts = maxNumberOfAttempts - attempts;
    numberOfGuessesMessage.style.display = "";
    numberOfGuessesMessage.innerHTML = `You guessed ${guess}. <br> ${remainingAttempts} guesses remaining`;
  }

  if (attempts === maxNumberOfAttempts) {
    maxGuessesMessage.style.display = "";
    submitButton.disabled = true;
    guessInput.disabled = true;
  }

  guessInput.value = "";

  resetButton.style.display = "";
}

function hideAllMessages() {
  /*replaced elementIndex <= messages.length to elementIndex < messages.length*/
  for (let elementIndex = 0; elementIndex < messages.length; elementIndex  ) {
    messages[elementIndex].style.display = "none"; //removed [elementIndex]
  }
  // for (let message in messages.value) {
  //   //used for..in to iterate through the HTML collection
  //   message.style.display = "none";
  // }
}

function setup() {
  // Get random number
  targetNumber = getRandomNumber(1, 100);
  console.log(`target number: ${targetNumber}`);

  // Reset number of attempts
  maxNumberOfAttempts = 0;

  // Enable the input and submit button
  submitButton.disabled = false;
  guessInput.disabled = false;

  hideAllMessages();
  resetButton.style.display = "none";
}

submitButton.addEventListener("click", checkGuess);
resetButton.addEventListener("click", setup);

setup();

main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

#guess {
  width: 5em;
}

#reset {
  margin: 20px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="guess.css" rel="stylesheet" />
    <title>Number Guesser</title>
  </head>
  <body>
    <main>
      <h1>Guessing Game</h1>
      <p>
        I'm thinking of a number from 1 to 99! Can you guess it in 5 tries or
        less?
      </p>
      <div>
        <input type="number" id="guess" min="1" max="99" />
        <button id="submit">Submit Guess</button>
      </div>
      <div>
        <p  id="number-of-guesses"></p>
        <p  id="too-high">You guessed too high. Try again.</p>
        <p  id="too-low">You guessed too low. Try again.</p>
        <p  id="max-guesses">
          You reached the max number of guesses
        </p>
        <p  id="correct">
          Congratulations, You guessed correctly! <br />
          Would you like to play again?
        </p>
      </div>
      <button id="reset">Reset</button>
    </main>
    <script src="guess.js"></script>
  </body>
</html

CodePudding user response：

just increment attempts as attempts ; below const remainingAttempts = maxNumberOfAttempts - attempts;. this should solve the no. of attempts part.

CodePudding user response：

In setup(), when you reset the number of attempts, you should be setting it to 5: maxNumberOfAttempts = 5;

Additionally, in checkGuess(), you should:

Make sure to decrease the number of attempts with each guess. Add maxNumberOfAttempts-- at the top of the function.
At the bottom of if (guess !== targetNumber), you can replace the variable in the message from ${remainingAttempts} to ${maxNumberOfAttempts} , since maxNumberOfAttempts is now keeping track of the amount of attempts remaining.
Lastly, the next if statement can check if the user is out of attempts with if (maxNumberOfAttempts === 0) {...} This eliminates the need to use 3 different 'attempt' variables since you're resetting back to '5' at each instance of setup() anyway.