Review Algorithmic Thinking by Building a Dice Game - Step 10

JavaScript
1

Tell us what’s happening:

I need help with step 10 of Algorithmic Thinking, I cant seem to understand what exactly the question is asking

Your code so far

keepScoreBtn.addEventListener(‘click’, () => {

totalScoreText.textContent = score;

});

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


/* file: styles.css */


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

  score += parseInt(selectedValue);
    totalScore.textContent = score;

// User Editable Region

Your browser information:

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

Challenge Information:

Review Algorithmic Thinking by Building a Dice Game - Step 10

2

Hi there!
What is the question?

3

this is the instruction. After a user makes a selection, they should be able to keep that score and move onto the next round by clicking the keepScoreBtn.

When that button is clicked, you should find which radio option is checked and capture its value and id attributes. If the user has selected an option, call your functions to update the score, reset the radio options, and add the value and id to the score history.

If the user has not selected an option, display an alert informing them to do so.

The solution you provided does not work, but thanks

4

Hello.

this the instruction.
After a user makes a selection, they should be able to keep that score and move onto the next round by clicking the keepScoreBtn.

When that button is clicked, you should find which radio option is checked and capture its value and id attributes. If the user has selected an option, call your functions to update the score, reset the radio options, and add the value and id to the score history.

If the user has not selected an option, display an alert informing them to do so.

The first error in the console says: When your

keepScoreBtn

is clicked, the score should be updated in the
totalScore text.

but when I try to update score or even totalScoreText using textContent it doesnt work.

5

You need to add addEventListener() on required button element with click event parameter and a call back function. Within the function body you need to execute the code that matching to the instructions.

6

Thank you but that does not answer the question, When I follow the instructions I still get the error

7

I can’t see, what you did. Post your code here.

8

ok this my code with the event listener:

keepScoreBtn.addEventListener('click', () => {
let selectedValue = null;
let selectedId = null;
let optionSelected = false

if(!scoreInputs){
  alert("Please select a value")
}

  for(let input of scoreInputs){
    if(input.checked){
      selectedValue = input.value
      selectedId = input.id
      optionSelected = true;
    } 

  }

  if(!optionSelected){
    alert("Please select an option")
  }
 
resetRadioOptions()
scoreHistory.innerHTML = `<li>${selectedId} : ${selectedValue}</li>`
total += parseInt(selectedValue);
totalScoreText.textContent  = total;

});

This is the error appearing in the console:

"When your keepScoreBtn is clicked, the score should be updated in thetotalScore text.

This is the complete code:

const listOfAllDice = document.querySelectorAll(".die");
const scoreInputs = document.querySelectorAll("#score-options input");
const scoreSpans = document.querySelectorAll("#score-options span");
const currentRound = document.getElementById("current-round");
const totalScoreText = document.getElementById("total-score");
const currentRoundRolls = document.getElementById("current-round-rolls");
const totalScore = 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 total = 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];
  });
};

const updateStats = () => {
  currentRoundRolls.textContent = rolls;
  currentRound.textContent = round;
};

const updateRadioOption = (index, score) => {
  scoreInputs[index].disabled = false;
  scoreInputs[index].value = score;
  scoreSpans[index].textContent = `, score = ${score}`;
};

const updateScore = (selectedValue, achieved) => {
  totalScore += parseInt(selectedValue);
  totalScoreText.textContent = totalScore;
  scoreHistory.innerHTML = `<li>${achieved} : ${selectedValue}</li>`;
}

const getHighestDuplicates = (arr) => {
  const counts = {};

  for (const num of arr) {
    if (counts[num]) {
      counts[num]++;
    } else {
      counts[num] = 1;
    }
  }

  let highestCount = 0;

  for (const num of arr) {
    const count = counts[num];
    if (count >= 3 && count > highestCount) {
      highestCount = count;
    }
    if (count >= 4 && count > highestCount) {
      highestCount = count;
    }
  }

  const sumOfAllDice = arr.reduce((a, b) => a + b, 0);

  if (highestCount >= 4) {
    updateRadioOption(1, sumOfAllDice);
  }

  if (highestCount >= 3) {
    updateRadioOption(0, sumOfAllDice);
  }

  updateRadioOption(5, 0);
};

const resetRadioOptions = () => {
  scoreInputs.forEach((input) => {
    input.disabled = true;
    input.checked = false;
  });

  scoreSpans.forEach((span) => {
    span.textContent = "";
  });
};

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 = null;
let selectedId = null;
let optionSelected = false

if(!scoreInputs){
  alert("Please select a value")
}

  for(let input of scoreInputs){
    if(input.checked){
      selectedValue = input.value
      selectedId = input.id
      optionSelected = true;
    } 

  }

  if(!optionSelected){
    alert("Please select an option")
  }
 
resetRadioOptions()
scoreHistory.innerHTML = `<li>${selectedId} : ${selectedValue}</li>`
total += parseInt(selectedValue);
totalScoreText.textContent  = total;

});