List array elements, one by one, with a click of a button

Question

I am new to Javascript and working with the basics. I am wanting to create an array whose individual elements are randomly drawn, one at a time, with a click of a button, until all array elements are displayed on the screen. The code I have is almost there. But the issue is that when it runs, it always grabs 2 elements on the first button click, rather than 1. It runs well for the remaining elements. Sure would appreciate some insight to this problem. Thank you.

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

It "always" draws 2 elements because of the i+=text. Your array is small thus the loop needs 2 iteration (of cocatinating the strings to get the number i) to go over myArray.length.

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

So there is a possibility that two elements get printed. Depending on the length of the array, there could be more.

You don't need the loop, just choose a number and print 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
    }
}