Review Algorithmic Thinking by Building a Dice Game - Step 7

JavaScript
1

Tell us what’s happening:

Hi, i dont know what is going on with my code?Why it says cannot set property of undefined

Your code so far

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


/* file: styles.css */


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

const getHighestDuplicates = (diceValuesArr) => {
const x = {};
diceValuesArr.forEach(el => {
  x[el] = (x[el] || 0) + 1;
});
console.log(x);
const xIntoArrayForResult = Object.keys(x);
const xIntoArray = Object.values(x);
const xSorted = xIntoArray.sort((a,b) => b - a);
console.log(xSorted);
 if (xSorted[0] === 3){
   document.getElementById("three-of-a-kind").disabled = false;
   totalScoreElement.textContent = `, score = ${xIntoArrayForResult.reduce((acc, el) => acc + el, 0)}`; 
 } else if (xSorted[0] === 4) {
   document.getElementById("four-of-a-kind").disabled = false;
   totalScoreElement.textContent = `, score = ${xIntoArrayForResult.reduce((acc, el) => acc + el, 0)}`; 
 } else {
   document.getElementById("none").disabled = false;
   totalScoreElement.textContent = ", score = 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 OPR/115.0.0.0

Challenge Information:

Review Algorithmic Thinking by Building a Dice Game - Step 7

2

You’ve encountered something called “variable shadowing”, where you have two variables in two different scopes with the same name.

diceValuesArr is defined earlier in the code as:

let diceValuesArr = [];

You define a function parameter diceValuesArr in your function definition:

So your line here inside your function uses the diceValuesArr from the parameter, not the global value:

But when you call the function, you don’t pass any arguments:

So the value of that parameter is, in fact, undefined.

You have two options to fix this:

  1. Remove the parameter entirely and use the global value (recommended)
  2. Pass diceValuesArr as an argument in your function call (not recommended)
2 Likes
3

So i noticed few more things in my code, it doesnt sum the numbers correctly, and it does it as a string, not a number, and it doesnt switch off a radio option if it is no longer an option, and how do i do if i remove the parameter entirely?

const getHighestDuplicates = () => {
const x = {};
diceValuesArr.forEach(el => {
  x[el] = (x[el] || 0) + 1;
});
console.log(x);
const xIntoArrayForResult = Object.keys(x);
const xIntoArray = Object.values(x);
const xSorted = xIntoArray.sort((a,b) => b - a);
console.log(xSorted);
 if (xSorted[0] === 3){
   document.getElementById("three-of-a-kind").disabled = false;
   totalScoreElement.textContent = `, score = ${xIntoArrayForResult.reduce((acc, el) => acc + Number(el), 0)}`; 
 } else if (xSorted[0] === 4) {
   document.getElementById("four-of-a-kind").disabled = false;
   totalScoreElement.textContent = `, score = ${xIntoArrayForResult.reduce((acc, el) => acc + Number(el), 0)}`; 
 } else {
   document.getElementById("none").disabled = false;
   totalScoreElement.textContent = ", score = 0";
 }
}

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

Like this?Nothing more?
And i think i must remake the whole logic of getting a score, because the way i did it wont work

4

the tests will call the function with an argument, so you should have a parameter for that function even if it’s not the recommended way by Naomi

5

hi, it seems like i made it to work fine, but still it doesnt pass

const getHighestDuplicates = () => {
const x = {};
diceValuesArr.forEach(el => {
  x[el] = (x[el] || 0) + 1;
});
const xIntoPairs = Object.entries(x);
const numericPairs = xIntoPairs.map(([key, value]) => [Number(key), value]); 
const xSorted = numericPairs.sort((a, b) => b[1] - a[1]); 
const maxCount = xSorted[0][1];
console.log("diceValuesArr:", diceValuesArr);
console.log("x:", x);
console.log("xSorted:", xSorted);
scoreInputs.forEach((input, index) => {
        input.disabled = true;
        input.value = 0;
        scoreSpans[index].textContent = "";
    });
const xMultiplied = xSorted.map(([key, value]) => key * value);          
 if (maxCount === 3){  
   updateRadioOption(0 ,xMultiplied.reduce((acc, el) => acc + el, 0)); 
   updateRadioOption(5 ,0);
 } else if (maxCount === 4) {
   updateRadioOption(1 ,xMultiplied.reduce((acc, el) => acc + el, 0)); 
   updateRadioOption(5 ,0);
 } 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(diceValuesArr);  
  }
});
6

create a getHighestDuplicates function which takes an array of numbers.

You will need to follow the instructions because