Why is splice not removing elements from my array?

Question

I am creating a roulette game that displays random items from different arrays when the wheel lands on a specific category. So far everything works except when the wheel lands on a category, it selects the same random item from the correct array over and over again. I am trying to use math.random and the splice method to randomly select an item from an array, and remove that item so only new, random items from the array can be displayed after, but it hasn't worked.

let deg = 0;
  // The 360 degree wheel has 8 zones, so each zone is 45 degrees
  let zoneSize = 45;

const a = ["a", "b", "c", "d", "e"]
const b = ["f", "g", "h", "i", "j"]
const c = ["a", "b", "c", "d", "e"]
const d = ["f", "g", "h", "i", "j"]
const e = ["a", "b", "c", "d", "e"]
const f = ["f", "g", "h", "i", "j"]
const g = ["a", "b", "c", "d", "e"]
const h = ["f", "g", "h", "i", "j"]

// zones for each 8 categories
const symbolZones = [];
symbolZones[1] = a.splice(Math.floor(Math.random()*a.length), 1);
symbolZones[2] = b.splice(Math.floor(Math.random()*b.length), 1);
console.log(symbolZones);
symbolZones[3] = c.splice(Math.floor(Math.random()*c.length), 1);
symbolZones[4] = d.splice(Math.floor(Math.random()*d.length), 1);
console.log(symbolZones);
symbolZones[5] = e.splice(Math.floor(Math.random()*e.length), 1);
symbolZones[6] = f.splice(Math.floor(Math.random()*f.length), 1);
console.log(symbolZones);
symbolZones[7] = g.splice(Math.floor(Math.random()*g.length), 1);
symbolZones[8] = h.splice(Math.floor(Math.random()*h.length), 1);
console.log(symbolZones);


// display a question from the winning category
  const handleWin = (actualDeg) => {
    const winningSymbolNr = Math.ceil(actualDeg / zoneSize);
    display.innerHTML = symbolZones[winningSymbolNr];
  }

Answer 1

I don't know how the rest of the code is, but if you always get the same value over and over again it could be that you're not re-running the code that gets the values.

Try wrapping the logic for retrieving the symbolZones in a function:

function getSymbolZones() {

  const symbolZones = [];

  symbolZones[1] = a[Math.floor(Math.random()*a.length)];
  symbolZones[2] = b[Math.floor(Math.random()*b.length)];
  symbolZones[3] = c[Math.floor(Math.random()*c.length)];
  symbolZones[4] = d[Math.floor(Math.random()*d.length)];
  symbolZones[5] = e[Math.floor(Math.random()*e.length)];
  symbolZones[6] = f[Math.floor(Math.random()*f.length)];
  symbolZones[7] = g[Math.floor(Math.random()*g.length)];
  symbolZones[8] = h[Math.floor(Math.random()*h.length)];

  return symbolZones;
}

and then use it in the handleWin function.

const handleWin = (actualDeg) => {
  const symbolZones = getSymbolZones();
  const winningSymbolNr = Math.ceil(actualDeg / zoneSize);
  display.innerHTML = symbolZones[winningSymbolNr];
}

PS I understand that you start the array at index 1 because that's the smallest zone you can get from the operation 45 / 45. But if I were you I'd start the index from 0 and just subtract 1 when accessing the array: symbolZones[winningSymbolNr - 1] . This way you don't get weird bugs when trying to loop through an array that has an empty first index.

Answer 2

Other than using array , I would suggest you use object and a for loop to make the code easier to execute. This code should work:

 let deg = 0; // The 360 degree wheel has 8 zones, so each zone is 45 degrees let zoneSize = 45; let symbol = { a: ["a", "b", "c", "d", "e"], b: ["f", "g", "h", "i", "j"], c: ["a", "b", "c", "d", "e"], d: ["f", "g", "h", "i", "j"], e: ["a", "b", "c", "d", "e"], f: ["f", "g", "h", "i", "j"], g: ["a", "b", "c", "d", "e"], h: ["f", "g", "h", "i", "j"], } // zones for each 8 categories const arr = []; for (let i in symbol) { let item = symbol[i].splice(Math.floor(Math.random() * symbol[i].length), 1) arr.push(item) } //Make the nested array become flat array let symbolZones = arr.flat(1) console.log(symbolZones) const handleWin = (actualDeg) => { const winningSymbolNr = Math.ceil(actualDeg / zoneSize); display.innerHTML = symbolZones[winningSymbolNr]; }

Answer 3

I rearranged the input arrays into an array of arrays (9 arrays of 5 elements = 45). I'm guessing that you want the whole thing shuffled.

 const log = data => console.log(JSON.stringify(data)); let zones = [ ["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", ""] ]; let zoneSize = zones.length * zones[0].length; let symbolZones = []; for (let i = zoneSize; i > 0; i--) { let deg = zones.flatMap(z => z.splice(Math.floor(Math.random() * z.length), 1)); if(deg.length > 0) { symbolZones.push(deg); } } log(zones); log(symbolZones);

 .as-console-row-code { display: block; width: 100%; overflow-wrap: anywhere; }.as-console-row::after { content: ''!important }