learning-area icon indicating copy to clipboard operation
learning-area copied to clipboard

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

Open zhayes84 opened this issue 2 years ago • 4 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.

zhayes84 avatar Aug 21 '23 22:08 zhayes84

@caugner can I work on this ?

JohannesMolla avatar Nov 12 '23 10:11 JohannesMolla

Can I work on this ?

Vidit151003 avatar Dec 14 '23 07:12 Vidit151003

i can fix this code

yashgautam99 avatar May 11 '24 11:05 yashgautam99

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!

low-perry avatar Jun 13 '24 20:06 low-perry

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!

dipikabh avatar Aug 27 '24 04:08 dipikabh

I believe the issue with previous guesses was an error on my part. I appreciate the help and attention. I apologize for taking so long to follow up on this!

zhayes84 avatar Oct 02 '24 12:10 zhayes84