Question

我正在尝试使用一系列按钮onclick事件清空数组。

如何访问新拼接的数组在它上面运行相同的函数，直到没有更多的字母??

这是我正在使用的代码：

（PS，我很感谢社区，评论，指示和帮助，但如果您要告诉我代码有多么不合适，请考虑重写它以便每个人都能以正确的方式学习）

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

好的，感谢Travis J和他的工作的一些补充更新了代码。所以我认为技术上这个线程结束了。

但是......有更好的方法可以做到以下几点吗？

<!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>

Answer 1

您应该在myFunction函数的上下文之外定义数组，否则您将在每个函数调用中定义一个新数组。

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

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

Answer 2

<强> jsFiddle Demo

嗯，我建议在这里进行一些重构。此外，您的确切演示不起作用的原因是每次调用函数时它都会重置my_array的值，因此需要重新设计。

＆＃13;

//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!");
 };
});

＆＃13;

<!-- 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>

＆＃13;

Answer 3

让我们看看这是否是你想要的：

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

}

随机清空Javascript数组

3 个答案: