How to Randomize an array with a button?-CodePudding

To put simply, I have an array which I want to randomize with the click of a button. Then I want to print the first result from that array with another button. So far the array is randomized when I open the file in Chrome, and if I print the results in the inspection window it shows that the button does somehow randomize the array.

However, I have another button that prints the first result on the screen, so far it prints in another window which is another problem but thats not the problem for now.

In short, the randomize button seems to work in the inspection window, but not when I click the print button.

Here is my code :

const magicitems = [];
magicitems[0] = "hammer ";
magicitems[1] = "gaunlet ";
magicitems[2] = "cloak ";
magicitems[3] = "chalk ";
magicitems[4] = "- ";

//shuffling the array with a command, is specific?//// i have no real idea what this bit means//
const Shuffle = magicitems => {
  for (let i = magicitems.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i   1));
    const temp = magicitems[i];
    magicitems[i] = magicitems[j];
    magicitems[j] = temp;
  }
  return magicitems
};
Shuffle(magicitems); //shuffling magic items//


var RandomItem = magicitems[0]; //making a var that is 1 item from magicitems//

const print = document.getElementById("demo").innerHTML = magicitems;
//printing the array was the first thing i did before the shuffle, now i shuffle first and am trying to print RandomItem to get 1 random item from the array//
// it worked, now i am trying to make a button that will do document.getElementById("demo").innerHTML = RandomItem; on a click instead of command
//after i made the button, the const print was no longer needed to put the result on the screen

<h2>random magic item</h2>

<p id="demo"></p>

<button type="button" onclick="Shuffle (magicitems)">random</button>
<button type="button" onclick="document.write(RandomItem)">print</button>

The array actually has 165 items so I reduced that for the sake of readability. However the concept is the same, I want the array to be shuffled when you click random, and to print the result in the same window when you press print.

CodePudding user response：

The issue is that the code does not update the RandomItem once the array is updated. Once you account for that, your implementation works:

//making the array//
const magicitems = [];
magicitems[0]= "hammer ";
magicitems[1]= "gaunlet ";
magicitems[2]= "cloak ";
magicitems[3]= "chalk ";
magicitems[4]= "- ";

//shuffling the array with a command, is specific?//// i have no real idea what this bit means//
const Shuffle = magicitems => {
for (let i = magicitems.length - 1; i > 0; i--){
const j = Math.floor(Math.random() * (i   1));
const temp = magicitems[i];
magicitems[i] = magicitems[j];
magicitems[j] = temp;
}

RandomItem = magicitems [0];
return magicitems
};
Shuffle (magicitems); //shuffling magic items//

var RandomItem = magicitems [0]; //making a var that is 1 item from magicitems//

const print = document.getElementById("demo").innerHTML = magicitems;

<h2>random magic item</h2>

<p id="demo"></p>


<button type="button" onclick="Shuffle(magicitems)">random</button>
<button type="button" onclick="document.getElementById('demo').innerHTML=RandomItem">print</button>

RandomItem is a global variable and can be accessed in the shuffle function. Just updating that when shuffle runs does the job.

CodePudding user response：

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);

const magicitems = ["hammer", "gaunlet", "cloak", "chalk"];

const shuffeldArray = shuffleArray(magicitems);

const firstItem = shuffeldArray[0] // <- this is where you make the mistake. You should get the first item of the shuffled array not the original Array. ```