How to splice an array and add random numbers to each array index in JavaScript

Question

I am attempting to build a slot machine in JavaScript and Vue.js with the index of each array returning a random number. For this project, I am using a for loop to loop through a slot array initialized at [1, 1, 1], and indexOf method to target the index of each slot array item. Then, I am also looping through an array of random numbers, then using a splice method to target the index of each slot array item, remove 1 element from that index, and replace the item at that given index with the random number. However, my slots.value.splice(index, 1, randomNum[r]) setup appears to be removing 1 element at index and replacing that element with the last element of randomNum array. My intention is to instead replace the element at each index of slots.value with differing random numbers from the randomNum array. How can I go about doing this?

Here is my code:

<template>
  <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
      <div  class="grid grid-cols-3 items-center py-16">
        <div v-for="slot in slots" :key="slot.id" class="w-96 h-96">
          <div class="w-full h-full rounded-md shadow-lg border-solid border-2 border-sky-500">
            <p class="text-9xl mt-28">{{ slot }}</p>
          </div>
        </div>
      </div>

      <div class="flex justify-center">
        <button @click="spin">
          Spin
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";

const slots = ref([1, 1, 1])

const spin = () => {
  const randomNumOne = Math.floor(Math.random() * (10 - 0) + 0)
  const randomNumTwo = Math.floor(Math.random() * (10 - 0) + 0)
  const randomNumThree = Math.floor(Math.random() * (10 - 0) + 0)

  const randomNum = [randomNumOne, randomNumTwo, randomNumThree]

  for (let i = 0; i < slots.value.length; i++) {
    for (let r = 0; r < randomNum.length; r++) {
      const index = slots.value.indexOf(slots.value[i])
      console.log(randomNum[r])
      if (index > -1) {
        // remove 1 element at each index and replace each with random numbers
        slots.value.splice(index, 1, randomNum[r])
      }
    }  
  }
}
</script>

Answer 1

Does this work for you ?

const slots = [1, 1, 1]

const spin = () => {
  const randomNumOne = Math.floor(Math.random() * (10 - 0) + 0);
  const randomNumTwo = Math.floor(Math.random() * (10 - 0) + 0);
  const randomNumThree = Math.floor(Math.random() * (10 - 0) + 0);

  const randomNum = [randomNumOne, randomNumTwo, randomNumThree];

  for (let i = 0; i < slots.length; i++) {
    const index = Math.floor(Math.random() * randomNum.length);
    slots[i] = randomNum.splice(index, 1)[0];
  }
}

spin();
console.log(slots);

For each element of your slots array, we take a random element of randomNum, remove it and assign it to the current index of slots.

Note that you can have the same number appearing multiple times in the final slots since the generation of randomNumOne, randomNumTwo and randomNumThree doesn't prevent the same number from being generated more than once.