Review Algorithmic Thinking by Building a Dice Game - Step 7

JavaScript
1

I have the following error:
“When the array has less than three of the same number, your getHighestDuplicates function should update the final radio option with , score = 0”

Please help to resolve. My code works as expected in preview.

Your code so far

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


/* file: styles.css */


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

function getHighestDuplicates () {
  let counts = diceValuesArr.reduce((map, val) => {map[val] = (map[val] || 0) + 1; 
  let sumOfArr = diceValuesArr.reduce((acc, cur) => acc + cur);

  if (val > 3) {
    updateRadioOption(0, sumOfArr)
  } else if (val === 4) {
    updateRadioOption(1, sumOfArr)
  } else if (val < 3) {
    updateRadioOption(5, 0)}
  }, {} );
}

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

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36

Challenge Information:

Review Algorithmic Thinking by Building a Dice Game - Step 7

2

Please check the console. There’s an error there you should address.

3

Right, it says “Uncaught TypeError: Cannot read properties of undefined (reading ‘6’).”

Every time I get the same error but with different numbers depending the result of the roll.

UPD: I have made some rolls and it looks like there is something wrong with die#2

4

No, my suggestion about die#2 was wrong

5

I spoke with a few experienced contributors on this forum and they suggested strongly that you try and write your code with a ‘plain old loop’ rather than a reduce. Your reduce is not returning anything so that’s why there’s an undefined being logged (the first one).

I re-indented the code and added some logs to surface this:

function getHighestDuplicates() {
  // 1st arg. of reduce is the callback function
  let counts = diceValuesArr.reduce(
    (map, val) => {
      console.log(`map: ${map}`);
      console.log(`val: ${val}`);
      console.log(`map[val]: ${map[val]}`);
      map[val] = (map[val] || 0) + 1; 
      let sumOfArr = diceValuesArr.reduce((acc, cur) => acc + cur);
      
      if (val > 3) {
        updateRadioOption(0, sumOfArr)
      } else if (val === 4) {
        updateRadioOption(1, sumOfArr)
      } else if (val < 3) {
        updateRadioOption(5, 0)
      }
    },
    {} ); //the initial value given to reduce is an empty object
  }

Once you have a working for loop that adds up the die then you can feel free to refactor it to a reduce or whatever you want to try next.

6

Omg, you have even consulted for me! Thank you for your efforts :pray:

I tried to follow your recommendations, now the errors have disappeared, but the tests still don’t let me go further. I don’t know why, but the last radio button updates immediately after the first roll, regardless if there are any duplicates or not.

May I ask your help one more time, please?

The new code is below

function getHighestDuplicates() {
  let count = {};
  for (let i of diceValuesArr) {count[i] ? count[i]++ : (count[i] = 1);    
  let sumOfArr = diceValuesArr.reduce((acc, cur) => acc + cur, 0);
   if (count[i] >= 3) {
      updateRadioOption(0, sumOfArr)
} else if (count[i] >= 4) {
      updateRadioOption(1, sumOfArr)
} else {
      updateRadioOption(5, 0)
}
}
}
;


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

You may try to log your count[i] value to console to observe your loop

8

It looks like a column of 5 numbers showing how many duplicates has each of 5 dice. Is it wrong? Actually I thought that ELSE word doesn’t not let the code update the radio#6 if there any other radio have been updated, but it lets

9

This code should run how many times?

If you don’t know, add a log statement to see.

1 Like
10

Five, I suppose? For each die, right?

I updated my code and compared it with others’. My code looks similar, but still doesn’t let me pass🫣 What I do wrong?

function getHighestDuplicates(arr) {
  let count = {};
    let sumOfArr = diceValuesArr.reduce((acc, cur) => acc + cur, 0);
for (let i = 0; i < 5; i++) {
  for (let key of diceValuesArr) {
    count[key] ? count[key]++ : (count[key] = 1);    
  if (count[key] >= 3) {     updateRadioOption(0, sumOfArr)
} else if (count[key] >= 4) {
  updateRadioOption(1, sumOfArr)
} else if (count[key] < 3) {
  updateRadioOption(5, score)}
  }
break 
 }
};


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

I disagree. The instructions don’t seem to imply that we need to update the radio buttons 5 times. They only say we should update them with the sum of the values of all the dice in a single roll?

12

What does this update do? What is score?
(I don’t see score defined anywhere)
Instead of writing score you should have 0 (which you had originally).

1 Like
13

Dear hbar1st, thank you for your patience and instructions! I really appreciate your help.

When I log count[key] I get 5 numbers showing how many times every number has appeared in a roll. I suppose that it is the correct output.

So the top FOR loop is not useful here. Removed it and have a code like that =>

function getHighestDuplicates(arr) {
  let count = {};
  let sumOfArr = diceValuesArr.reduce((acc, cur) => acc + cur, 0);

  for (let key of diceValuesArr) {
    count[key] ? count[key]++ : (count[key] = 1);    
    if (count[key] >= 3) {   updateRadioOption(0, sumOfArr)
    };
    if (count[key] >= 4) {
  updateRadioOption(1, sumOfArr)
    }; 
    if (count[key] < 3) {
  updateRadioOption(5, 0)
    }
  }
 };

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

Pls use the arr param here and in the for loop.

Please pass the array here.

Why do you need to add these ifs inside the loop? Shouldn’t they only be executed once?

Try to ask yourself: what is count?
What is the for loop supposed to give me?

The logic should be to count first right?