Review Algorithmic Thinking by Building a Dice Game - Step 12

JavaScript
1

Tell us what’s happening:

my code seems to be fine and working in the preview. However, its not giving the green flag!
Declare a resetGame function to do so. Reset all of the listOfAllDice elements to display 0 , update score and rolls to be 0 , update round to be 1 , set the totalScoreElement text to the user’s total score, clear the score history by setting it to an empty string, set the rollsElement text to the number of rolls, and set the roundElement text to the current round. Finally, reset all of the radio buttons to their initial states.

Your code so far

<!-- file: index.html -->


/* file: script.js */
// User Editable Region



const resetGame=()=>{
  listOfAllDice.forEach(element => element.textContent='0');
  score=0;
  rolls=0;
  round=1;
  totalScoreElement.textContent=score;
  
  rollsElement.textcontent=rolls;
  roundElement.textContent=round;
  resetRadioOptions();
}

rollDiceBtn.addEventListener("click", () => {
  if (rolls === 3) {
    alert("You have made three rolls this round. Please select a score.");
  } else {
    rolls++;
    resetRadioOptions();
    rollDice();
    updateStats();
    getHighestDuplicates(diceValuesArr);
  }
});

rulesBtn.addEventListener("click", () => {
  isModalShowing = !isModalShowing;

  if (isModalShowing) {
    rulesBtn.textContent = "Hide rules";
    rulesContainer.style.display = "block";
  } else {
    rulesBtn.textContent = "Show rules";
    rulesContainer.style.display = "none";
  }
});

keepScoreBtn.addEventListener("click", () => {
  let selectedValue;
  let achieved;

  for (const radioButton of scoreInputs) {
    if (radioButton.checked) {
      selectedValue = radioButton.value;
      achieved = radioButton.id;
      break;
    }
  }

  if (selectedValue) {
    rolls = 0;
    round++;
    updateStats();
    resetRadioOptions();
    updateScore(selectedValue, achieved);
    if (round > 6) {
      setTimeout(() => {
        alert(`Game Over! Your total score is ${score}`);
      }, 500);
      resetGame();

    }
  } else {
    alert("Please select an option or roll the dice");
  }
});

// User Editable Region

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Review Algorithmic Thinking by Building a Dice Game - Step 12

2

Did you clear the score history by setting it to an empty string? (Check the instructions and the hint)

3

Check for errors in the console area

4

yes, i did. the final hint asks to call the resetGame function after displaying the alert in keepScoreBtn listener which is already being called

5

checked, found none there

6 
[ReferenceError: totalScoreElement is not defined]
[ReferenceError: totalScoreElement is not defined]
[ReferenceError: totalScoreElement is not defined]
[ReferenceError: totalScoreElement is not defined]
[ReferenceError: totalScoreElement is not defined]

What is the name of the variable that stores the total score element? You define these at the top

7

it is totalScoreElement and is defined

8

Can you please show me the line of code where it is defined?

9

const totalScoreElement = document.getElementById(“total-score”);

its not in the provided code above. but it is mentioned in the whole

10

Oh strange, I reset the step and mine changed to this. I wonder if it was updated recently…

Now I get this hint, do you get the same?

You should call your resetGame function after displaying the alert in your keepScoreBtn listener.

I see that line in your code but I think the function call needs to be right after your alert, within the same curly braces.

1 Like
11

yes within the curly braces it is indeed, thanks for the help!!

2 Likes