Review Algorithmic Thinking by Building a Dice Game - Step 5

JavaScript
1

Tell us what’s happening:

Hi I’m having issues with this problem. I checked the other forums post and solutions there which is what I usual do and that helps but im not sure why its not working.

here my code
function updateStats() {

currentRoundRolls.textContent = rolls;
currentRound.textContent = rounds;

}

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

Your code so far

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


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

function updateStats() {
    
    currentRoundRolls.textContent = rolls;
    currentRound.textContent = rounds;
}

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

// 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/127.0.0.0 Safari/537.36

Challenge Information:

Review Algorithmic Thinking by Building a Dice Game - Step 5

2

you have this in the wrong location. Right now you are calling the function anytime someone clicks the button, even if the rolls are equal to 3. Does that seem correct logically? (or even compare that to what they wanted to see if it is correct)

The other problem is the code in updateStats.
It is referencing variables that do not exist?

3

the update stats function should reference the let roll and rounds code earlier in the project.

4

bro none of this makes sense I tried chat gtp I have look at other forums post and I got nothing this makes zero sense what the hell Im doing wrong or what im supposed to be doing here.

5

i have given 2 pieces of guidance/hints.
Which one do you need help understanding?
You will have to attempt to ask a proper question to get a response.

6

Don’t use chatgpt, you don’t know if it was trained on the correct data to solve this problem, and you nor chatgpt are able to evaluate if it’s answers are correct.

Read the advice above and take it one problem at a time.

The instructions say:

call that function when your rollDiceBtn is clicked and the dice are rolled.

So you should call the function when the dice are rolled. Right after the dice are rolled. Can you adjust where you call the function?

7

Yes I noticed I put that in the wrong location and I moved it to be placed under my roll dice call.

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

now im being told that my Your updateStats function should update the rollsElement element with the correct value

8 
currentRoundRolls.textContent = rolls;
currentRound.textContent = round;

Can you look near the beginning of the code where you define the rolls element variable?

9

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

10 
const listOfAllDice = document.querySelectorAll(".die");
const scoreInputs = document.querySelectorAll("#score-options input");
const scoreSpans = document.querySelectorAll("#score-options span");
const roundElement = document.getElementById("current-round");
const rollsElement = document.getElementById("current-round-rolls");
const totalScoreElement = document.getElementById("total-score");
const scoreHistory = document.getElementById("score-history");
const rollDiceBtn = document.getElementById("roll-dice-btn");
const keepScoreBtn = document.getElementById("keep-score-btn");
const rulesContainer = document.querySelector(".rules-container");
const rulesBtn = document.getElementById("rules-btn");

let diceValuesArr = [];
let isModalShowing = false;
let score = 0;
let round = 1; 
let rolls = 0; 

const rollDice = () => {
  diceValuesArr = [];

  for (let i = 0; i < 5; i++) {
    const randomDice = Math.floor(Math.random() * 6) + 1;
    diceValuesArr.push(randomDice);
  };

  listOfAllDice.forEach((dice, index) => {
    dice.textContent = diceValuesArr[index];
  });
};
11

I can already see this thanks.

This should tell you what variables are defined for use. What can you learn from this about the variables that you’ve used?

How does the hint relate to these variables?

12 
const roundElement = document.getElementById("current-round");
const rollsElement = document.getElementById("current-round-rolls");

that these are the lines that needs to be changed with the textcontext property. I believe that’s the correct term. which needs to equal rolls and rounds which I did

13

You don’t need to change these lines but you need to understand the point I made already:

Compare the code you wrote in updateStats to the existing variables defined at the top of the program. You are trying to reference a variable that doesn’t exist (or has not been declared). This is the mistake you need to fix. The hint is trying to also tell you this.

14

omg it was thank you I get it now I needed to do the round and rolls elements not the current round and current rols

2 Likes