List of array elements, one by one, at the click of a button

Question

I am new to Javascript and working with the basics. I want to create an array whose individual elements are randomly drawn one by one click of a button until all the elements of the array are displayed on the screen. The code I have is almost there. But the problem is that when it starts, it always captures 2 elements the first time the button is pressed, not 1. It works well for the rest of the elements. Of course, it would be helpful to understand this problem. Thanks.

var myArray=['1','2','3','4','5','6','7'] var text = ""; var i; function RandomDraw() { for(i = 0; i < myArray.length; i+=text) { var ri = Math.floor(Math.random() * myArray.length); var rs = myArray.splice(ri, 1); document.getElementById("showSplice").innerHTML = text+=rs; //document.getElementById("showArrayList").innerHTML = myArray; } } 

Answer 1

He "always" draws 2 elements due to i+=text . Your array is small, so the loop requires 2 iterations (rolling the lines to get the number i ) << 22>.

 First iteration: i = 0 => 0 < myArray.length => true prints number Second iteration: (say '4' get choosen) i = i + text and text = '4' => i = "04" => "04" < myArray.length => true prints number Third iteration: (say '3' get choosen) i = i + text and text = '43' => i = "0443" => "0443" < myArray.length => false loop breaks 

Thus, it is possible to print two elements. Depending on the length of the array, it may be longer.

You do not need a loop, just select a number and type it:

 function RandomDraw() { if(myArray.length > 0) { // if there still elements in the array var ri = Math.floor(Math.random() * myArray.length); // do your job ... var rs = myArray.splice(ri, 1); document.getElementById("showSplice").textContent = rs; // .textContent is better } else { // print a message indicating that the array is now empty } } 

Answer 2

Another solution is to shuffle the array, and then, with each click, pop element from the shuffled array.

 function shuffle(array) { return array.sort(function() { return Math.random() - 0.5; }); } var button = document.getElementById('button'); var origin = ['1','2','3','4','5','6','7']; var myArray = shuffle(origin); var currentValue = null; button.onclick = function() { currentValue = myArray.pop(); if(!!currentValue) { console.log(currentValue); } } 

 <button id='button'> get element </button> 

You can shuffle the array again on every click, but I think this is optional ...

If you are curious about Math.random() - 0.5 :

[...] Math.random returns a number from 0 to 1. Therefore, if you call Math.random() - 0.5 , the probability is 50% that you will get a negative number and a 50% chance that you will get a positive result number. If you run the for loop and add these results to the array, you get the full distribution of negative and positive numbers.

• https://teamtreehouse.com/community/mathrandom05

Answer 3

I would do it like this:

 let myArray=['1','2','3','4','5','6','7'] function RandomDraw(){ const selectedIndex = Math.floor(Math.random() * myArray.length); const selected = myArray[selectedIndex] myArray = myArray.slice(0, selected).concat(myArray.slice(selected + 1)); return selected; } 

Each time you call RandomDraw , it returns a random number without repeating.

Answer 4

As I understand it, you want to draw all the elements from the array after one click. So a loop is needed.

As others have said, there are several problems in your for loop:

• that i + = text doesn't make sense
• you are looping until I get to the length of your array, but you are splicing this array, therefore, decreasing its length

You can fix your for loop:

 function RandomDraw() { var length = myArray.length; var ri = 0; for (var i=0;i<length;i++) { ri = Math.floor(Math.random() * myArray.length); console.log("Random index to be drawn : " + ri); // removing that index from the array : myArray.splice(ri, 1); console.log("myArray after a random draw : ", myArray); } } 

Or you can use a while loop:

 function RandomDraw() { var ri = 0; while (myArray.length > 0) { ri = Math.floor(Math.random() * myArray.length); console.log("Random index to be drawn : " + ri); // removing that index from the array : myArray.splice(ri, 1); console.log("myArray after a random draw : ", myArray); } }