javascript - 单击按钮，一个接一个地列出数组元素

Question

我是 Javascript 的新手，正在学习基础知识。我想创建一个数组，其单个元素是随机绘制的，一次一个，只需单击一个按钮，直到所有数组元素都显示在屏幕上。我的代码几乎就在那里。但问题是，当它运行时，它总是在第一次单击按钮时抓取 2 个元素，而不是 1 个。其余元素运行良好。当然会感谢对这个问题的一些见解。谢谢。

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

由于 i+=text，它“总是” 绘制 2 个元素。您的数组很小，因此循环需要 2 次迭代(cocatinating 字符串以获得数字 i)以遍历 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

因此有可能打印两个元素。根据数组的长度，可能会有更多。

你不需要循环，只需选择一个数字并打印它:

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