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

[zhayes84]

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.

[JohannesMolla]

@caugner can I work on this ?

[Vidit151003]

Can I work on this ?

[yashgautam99]

i can fix this code

[low-perry]

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!

[dipikabh]

Hi @zhayes84, both these lines of code are functionally equivalent:

• guesses.textContent = ${guesses.textContent} ${userGuess}; // uses template literal
• guesses.textContent += userGuess + ' '; // uses addition assignment

Both append the new guess to the existing content. To maintain consistency, @low-perry has opened the PR (thank you!) so that the learning-area code matches the code we have in content (using template literal).

However, regarding the issue you've reported about "Previous guesses:" not displaying in subsequent games: I've tested the code with both methods of updating guesses.textContent and haven't been able to reproduce the problem. That is, "Previous guesses:" is always correctly displayed after:

• Clicking "Start new game", entering a number, and clicking "Submit guess".
  or
• Clicking "Start new game" and clicking "Submit guess" without supplying an input.

If you're still experiencing the issue, could you provide some more details about the steps you take when you encounter this problem and share the complete code you're using? Thanks!