ranomizing an array with a button-CodePudding

very simply put, 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 it in another window which i 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 directly from my document

<html>
<body>

<h2>random magic item</h2>

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

<script>
//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;
}
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




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


</body>
</html>

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.

i think it has to do with the fact that although i shuffle the array, i don't change the value of the RandomItem variable after it has been shuffled, so it has the old value no matter how much i shuffle.

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. ```