mdn / learning-area

GitHub repo for the MDN Learning Area.

Home Page:https://developer.mozilla.org/en-US/Learn

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

javascript/introduction-to-js-1/first-splash/number-guessing-game.html line 64 is different than any material covered by the tutorial

zhayes84 opened this issue · comments

In the tutorial: "A first splash into JavaScript" , the following code block is given as a start point:

function checkGuess() {
  const userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = "Previous guesses:";
  }
  guesses.textContent = `${guesses.textContent} ${userGuess}`;

  if (userGuess === randomNumber) {
    lastResult.textContent = "Congratulations! You got it right!";
    lastResult.style.backgroundColor = "green";
    lowOrHi.textContent = "";
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = "!!!GAME OVER!!!";
    lowOrHi.textContent = "";
    setGameOver();
  } else {
    lastResult.textContent = "Wrong!";
    lastResult.style.backgroundColor = "red";
    if (userGuess < randomNumber) {
      lowOrHi.textContent = "Last guess was too low!";
    } else if (userGuess > randomNumber) {
      lowOrHi.textContent = "Last guess was too high!";
    }
  }

  guessCount++;
  guessField.value = "";
  guessField.focus();
}

Upon playing the final version of the game we make, I noticed that upon subsequent playthroughs, after clicking the "Start new game" button, the game no longer displays "Previous guesses:" before each previous guesses' number.

After further inspection, the final code contains this on line 64:

guesses.textContent += userGuess + ' ';

This line is different than any other material in the tutorial and appears to fix the issue I was having with subsequent playthroughs of the game.

@caugner can I work on this ?

Can I work on this ?

i can fix this code

I think @zhayes84 , could give more details about his issue? Cause the only difference between the tutorial and the final code is the style chosen.

//line1
guesses.textContent = `${guesses.textContent} ${userGuess}`;
//line2
guesses.textContent += userGuess + ' ';

In this context line1 and line2 are equivalent.

If the resetGame() function is implemented correctly, the code presented on the tutorial does not appear to have the bug that you mentioned!