Randomly Empty a Javascript Array

Question

I am trying to empty an array with a series of button onclick events.

How do I access the newly spliced array to run the same function over it until there are no more letters??

This is the code I am using:

(PS, I appreciate the community, comments, instructions, and help, but if you are gonna tell me how improper the code is, please think to rewrite it so everyone can learn the right way)

<body>

<button onClick="myFunction()">CLick</button>

</br>
<div id="myDiv"></div>
<div id="myDiv1"></div>

<button onClick="myFunction()">CLick</button>

</br>

<div id="myDiv2"></div>
<div id="myDiv3"></div>


<script>
function myFunction() {

    Array.prototype.randsplice = function () {

        var ri = Math.floor(Math.random() * this.length);
        var rs = this.splice(ri, 1);
        return rs;
    };

    var my_array = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    var result = my_array.randsplice();

    document.getElementById('myDiv').innerHTML=result;
    document.getElementById('myDiv1').innerHTML=my_array;

    }


</script>
</body>

Ok, Updated code thanks to Travis J and some add ons to his work. So I suppose technically this thread is over.

But... is there a better way to do the following?

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- type button as button so that it does not implicitly recieve submit as its type -->
<button id="myButton1" type="button">Click</button>

<br>
<div id="myDiv1"></div>
<div id="myDiv2"></div>

<!-- type button as button so that it does not implicitly recieve submit as its type -->
<button id="myButton2" type="button">Click</button>

<br>
<div id="myDiv3"></div>
<div id="myDiv4"></div>

<!-- type button as button so that it does not implicitly recieve submit as its type -->
<button id="myButton3" type="button">Click</button>

<br>
<div id="myDiv5"></div>
<div id="myDiv6"></div>

<!-- type button as button so that it does not implicitly recieve submit as its type -->
<button id="myButton4" type="button">Click</button>

<br>
<div id="myDiv7"></div>
<div id="myDiv8"></div>

<!-- type button as button so that it does not implicitly recieve submit as its type -->
<button id="myButton5" type="button">Click</button>

<br>
<div id="myDiv9"></div>
<div id="myDiv10"></div>

<!-- type button as button so that it does not implicitly recieve submit as its type -->
<button id="myButton6" type="button">Click</button>

<br>
<div id="myDiv11"></div>
<div id="myDiv12"></div>

<!-- type button as button so that it does not implicitly recieve submit as its type -->
<button id="myButton7" type="button">Click</button>

<br>
<div id="myDiv13"></div>
<div id="myDiv14"></div>



<script>
//Nothing wrong here, so lets just do it first
Array.prototype.randsplice = function () {
    var ri = Math.floor(Math.random() * this.length);
    return this.splice(ri, 1);//removed extra variable
};

//Use an eventlistener to wait for the DOM to load
//so that we can depend on DOM elements being available
window.addEventListener("load",function(){

    //locate the button element and save it in a variable
    var button1 = document.getElementById("myButton1");
    var button2 = document.getElementById("myButton2");
    var button3 = document.getElementById("myButton3");
    var button4 = document.getElementById("myButton4");
    var button5 = document.getElementById("myButton5");
    var button6 = document.getElementById("myButton6");
    var button7 = document.getElementById("myButton7");

    //do the same for the divs
    var myDiv1 = document.getElementById("myDiv1");
    var myDiv2 = document.getElementById("myDiv2");

    //do the same for the divs
    var myDiv3 = document.getElementById("myDiv3");
    var myDiv4 = document.getElementById("myDiv4");

    //do the same for the divs
    var myDiv5 = document.getElementById("myDiv5");
    var myDiv6 = document.getElementById("myDiv6");

    //do the same for the divs
    var myDiv7 = document.getElementById("myDiv7");
    var myDiv8 = document.getElementById("myDiv8");

    //do the same for the divs
    var myDiv9 = document.getElementById("myDiv9");
    var myDiv10 = document.getElementById("myDiv10");

    //do the same for the divs
    var myDiv11 = document.getElementById("myDiv11");
    var myDiv12 = document.getElementById("myDiv12");

    //do the same for the divs
    var myDiv13 = document.getElementById("myDiv13");
    var myDiv14 = document.getElementById("myDiv14");


    //setup the array we will use for this example
    var my_array = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

    //show the original array values
    myDiv2.innerHTML = my_array;

        //attach a click event handler to our button
        button1.onclick = function() {
            //modify my_array and display result
            myDiv1.innerHTML = my_array.randsplice();
            myDiv2.innerHTML = my_array;

            //attach a click event handler to our button
            button2.onclick = function () {
                //modify my_array and display result
                myDiv3.innerHTML = my_array.randsplice();
                myDiv4.innerHTML = my_array;

                //attach a click event handler to our button
                button3.onclick = function () {
                    //modify my_array and display result
                    myDiv5.innerHTML = my_array.randsplice();
                    myDiv6.innerHTML = my_array;

                    //attach a click event handler to our button
                    button4.onclick = function () {
                        //modify my_array and display result
                        myDiv7.innerHTML = my_array.randsplice();
                        myDiv8.innerHTML = my_array;

                        //attach a click event handler to our button
                        button5.onclick = function () {
                            //modify my_array and display result
                            myDiv9.innerHTML = my_array.randsplice();
                            myDiv10.innerHTML = my_array;

                            //attach a click event handler to our button
                            button6.onclick = function () {
                                //modify my_array and display result
                                myDiv11.innerHTML = my_array.randsplice();
                                myDiv12.innerHTML = my_array;

                                //attach a click event handler to our button
                                button7.onclick = function () {
                                    //modify my_array and display result
                                    myDiv13.innerHTML = my_array.randsplice();
                                    myDiv14.innerHTML = my_array;

                                //check if the array is empty and if so, perhaps display a                  message
                              //  if (my_array.length == 0) alert("Empty!");
                            };
                        }}}}}}});
</script>
</body>
</html>

In order to decipher your hieroglyph about what you want, may I ask: are you trying to "shuffle" my_array, are you trying to change randomly the elements inside the array, so a,b,c becomes c,a,b for example? — user2755150
– user2755150, Commented Nov 12, 2014 at 0:10
You want an Array.empty() method, or you want to know how to repeatedly call the randsplice() until the array is empty? — David Thomas
– David Thomas, Commented Nov 12, 2014 at 0:11
Anyhoo, you can use a while loop: while(my_array.length > 0){result = my_array.randsplice();} — user2755150
– user2755150, Commented Nov 12, 2014 at 0:16
I want to repeatedly (and randomly) call the randsplice() until the array is empty. — newneub
– newneub, Commented Nov 12, 2014 at 0:23
@ADASein yes, hieroglyph! My problem is very much knowing what I want to do and having very little clue as how best to do it AND ask about it. (shrugs shoulders and shakes head.... so is my plight....) — newneub
– newneub, Commented Nov 12, 2014 at 0:25

Travis J · Accepted Answer · 2014-11-12 00:36:48Z

2

jsFiddle Demo

Well, there are some refactorizations I would suggest here. In addition, the reason your exact demo does not work is that it resets the values of my_array each time the function is called, so that needs to be reworked.

//Nothing wrong here, so lets just do it first
Array.prototype.randsplice = function () {
 var ri = Math.floor(Math.random() * this.length);
 return this.splice(ri, 1);//removed extra variable
};

//Use an eventlistener to wait for the DOM to load
//so that we can depend on DOM elements being available
window.addEventListener("load",function(){
    
 //locate the button element and save it in a variable
 var button = document.getElementById("myButton");
   
 //do the same for the divs
 var myDiv = document.getElementById("myDiv");
 var myDiv1 = document.getElementById("myDiv1");
 
 //setup the array we will use for this example
 var my_array = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
 
 //show the original array values
 myDiv1.innerHTML = my_array;
    
 //attach a click event handler to our button
 button.onclick = function(){
  //modify my_array and display result
  myDiv.innerHTML = my_array.randsplice();     
  myDiv1.innerHTML = my_array;
  
  //check if the array is empty and if so, perhaps display a message
  if(my_array.length == 0) alert("Empty!");
 };
});

<!-- type button as button so that it does not implicitly recieve submit as its type -->
<button id="myButton" type="button">Click</button>

<br>
<div id="myDiv"></div>
<div id="myDiv1"></div>

answered Nov 12, 2014 at 0:36

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

newneub Over a year ago

Travis, Thank You! This is definitely the functionality I'm seeking. Only I'm trying to create 7 buttons and 14 divs that do what your 1 button and 2 divs do.

Ram · Accepted Answer · 2014-11-12 00:14:29Z

2

You should define the array outside of the myFunction function's context, otherwise you are defining a fresh array in each function call.

var my_array = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

function myFunction() {
    if (my_array.length === 0) return;
    // ...

edited Nov 12, 2014 at 0:14

answered Nov 12, 2014 at 0:08

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

Dave Chen · Accepted Answer · 2014-11-15 19:09:08Z

0

Let's see if this is what you want:

function myFunction() {

    Array.prototype.randsplice = function () {

        var ri = Math.floor(Math.random() * this.length);
        var rs = this.splice(ri, 1);
        return rs;
    };

    var my_array = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    var result;

    while(my_array.length > 0) {
        result = my_array.randsplice();
        document.getElementById('myDiv').innerHTML+=result;
    }

}

edited Nov 15, 2014 at 19:09

Dave Chen

11k8 gold badges42 silver badges72 bronze badges

answered Nov 12, 2014 at 0:28

user2755150

3 Comments

newneub Over a year ago

I'm trying make 7 buttons. When each is clicked a letter is randomly selected, sliced from the array, and put into the button's respective div.(Essentially the 1st button clicked has an array with 7 letters, the 2nd button will have an array with 6 letters, and so on.) Btw, thank you for the help

newneub Over a year ago

Travis J definitely has the functionality down. But I need to Expand it across 7 buttons and 14 Divs.

newneub Over a year ago

That is what I am in the process of trying. Just answering your comment.

Collectives™ on Stack Overflow

Randomly Empty a Javascript Array

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related