Javascript 单击按钮，逐个列出数组元素

我不熟悉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;
    }
}

var myArray=['1'，'2'，'3'，'4'，'5'，'6'，'7']
var text=“”；
var i；
函数RandomDraw（）{
对于（i=0；i

我会这样做：

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

每次调用

RandomDraw

时，它都会返回一个随机数，不会重复。

由于

i+=text

的原因，它“总是”绘制两个元素。您的数组很小，因此循环需要2次迭代（对字符串进行CoCatating以获得数字

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

---

按照我的理解，您希望在单击一次后从数组中绘制每个项目。因此需要循环

正如其他人所说，for循环中有几个问题：

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

• i+=文本没有意义
• 你一直循环直到我到达你数组的长度，但是你在拼接这个数组，因此减少了它的长度

您可以更正for循环：

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

---

另一种解决方案是洗牌数组，然后在每次单击时，

pop

洗牌数组中的元素

函数洗牌（数组）{
返回array.sort（函数（）{return Math.random（）-0.5；}）；
}
var button=document.getElementById（'button'）；
变量原点=['1'、'2'、'3'、'4'、'5'、'6'、'7']；
var myArray=shuffle（原点）；
var currentValue=null；
button.onclick=函数（）{
currentValue=myArray.pop（）；
如果（！！当前值）{
console.log（当前值）；
}
}

获取元素

每次单击只需要1次，为什么要使用for循环？如果（myArray.length>0）

i+=text

没有意义，只需删除for循环并添加一个

。感谢您的快速响应，Niels。这可能不是我想要的最终答案。单击按钮，代码将随机抓取并显示每个元素。但单击按钮后，屏幕上显示的上一个元素将被删除，下一个元素将显示。我试图在单击按钮时使每个元素都保留在屏幕上（直到显示整个阵列）。请多帮点忙。谢谢你的回复，易卜拉欣。看看这些回答，我发现我对自己想做什么还不够清楚（我已经编辑了我的问题）。对我来说，重要的是在点击按钮时，以连续的方式在屏幕上显示每个元素。一个元素出现（并保留）在屏幕上，然后是下一个元素。因此，当阵列的所有元素都被移除时，所有元素都会一起显示在屏幕上。非常感谢你的帮助-DonI更喜欢这样做，因为它很容易重置。
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);
    }
}