循环遍历数组并仅在单击事件后显示元素答案

【问题标题】：Loop though array and Displaying the elements only after click event循环遍历数组并仅在单击事件后显示元素
【发布时间】：2017-11-05 02:44:01
【问题描述】：

我想循环遍历数组（array）并仅在单击按钮（bt）后一一显示元素。当我运行此代码时，它仅显示数组的最后一个元素（即本田）。请帮帮我

var hints = document.querySelector(".hint");
var array = ["Car", "bmw", "mercy", "porsche", "hyundai", "jeep", "honda"];
var bt = document.querySelector("button");
for (var i = 1; i < 6; i++){
    bt.addEventListener("click", function(){
        hints.textContent = array[i];
    });
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Password</title>
        <link rel="stylesheet" href="password.css" type="text/css">
    </head>
    <body>
        <h1 class="hint"></h1>
        <button type="button" name="button">Cick me</button>
        <script src="password.js" charset="utf-8" type="text/javascript"></script>
    </body>
</html>

【问题讨论】：

标签： javascript arrays loops dom addeventlistener

【解决方案1】：

每次点击按钮时，它都会显示honda，因为在触发点击事件时，i的值是6。

所以，当你点击时，它总是会显示 array[6] 值，即'honda'。

无论如何，请尝试以下方法，它应该可以工作：

let hints = document.querySelector(".hint");
let array = ["Car", "bmw", "mercy", "porsche", "hyundai", "jeep", 
"honda"];
let bt = document.querySelector("button");
let count = 0;

bt.addEventListener('click', () => {
    hints.textContent = array[count];
    console.log('clicked!!');
    count++;

    if (count > array.length) {
        console.log('no more values in the array!!');
        return false;
    }
})

我还为它创建了一个codepen。你也可以看看： https://codepen.io/vishalkaului/pen/EbyjML

【讨论】：

【解决方案2】：

不需要for 循环。跟踪您的计数，并在点击时显示下一个。请参阅下面的编辑代码：

var hints = document.querySelector(".hint");
var array = ["Car", "bmw", "mercy", "porsche", "hyundai", "jeep", "honda"];
var bt = document.querySelector("button");
var count = 0;
    bt.addEventListener("click", function(){
       if (count < array.length) {
             hints.textContent = array[count];
            count++;
       }
    });

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Password</title>
        <link rel="stylesheet" href="password.css" type="text/css">
    </head>
    <body>
        <h1 class="hint"></h1>
        <button type="button" name="button">Cick me</button>
        <script src="password.js" charset="utf-8" type="text/javascript"></script>
    </body>
</html>

【讨论】：

但它一次打印一个数组中的所有元素，但我希望它在我继续点击时一个一个打印。
@user8887678 哦，我已经编辑了我的答案，现在回答这个问题