Question

我想循环遍历数组（数组）并且仅在单击按钮（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>

Answer 1

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

Answer 2

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

所以，总是当你点击它时，它总会显示数组[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 个答案: