Question

我想知道的是有点基础。我有以下页面

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<input id="con" value="">
<button id="fab">press</button>
<script>
    document.getElementById("fab").addEventListener("click", function(){
    var cars = ["Saab", "Volvo", "BMW", "Jaguar", "Tata"];
    document.getElementById("con").value = cars[0];
});
</script>
</body>
</html>

我想要做的就是当用户点击按钮时，应在值字段中添加下一个“汽车”数组。我不知道该怎么做，我做了一些研究，但找不到多少帮助。在页面加载时，值字段为空，在第一次单击时它将显示“cars [0]”，然后在第二次它应显示“cars [1]”，依此类推。我不知道怎么办，请帮忙。谢谢:)）

Answer 1

你只需要使用一个计数器，并确保你没有超过数组的末尾。您可以选择在显示最后一辆车后回到第一辆车：

<script>
var carCounter = 0;
document.getElementById("fab").addEventListener("click", function() {
    var cars = ["Saab", "Volvo", "BMW", "Jaguar", "Tata"];
    document.getElementById("con").value = cars[carCounter % cars.length];
    carCounter++;
});
</script>

Answer 2

您可以在侦听器外添加一个计数器变量，该变量在到达数组末尾时重置

＆＃13;

var counter = 0;
    cars = ["Saab", "Volvo", "BMW", "Jaguar", "Tata"];

document.getElementById("fab").addEventListener("click", function(){
    document.getElementById("con").value = cars[counter];
    counter++;
    if (counter == cars.length){
        counter = 0;
    }
});

＆＃13;

<p id="demo"></p>
<input id="con" value="">
<button id="fab">press</button>

＆＃13;

Answer 3

这是这样做的一种方式。我们使用模数运算符，但同时我们将结果分配给idx，这样它就不会随意增加。

＆＃13;

var cars = ["Saab", "Volvo", "BMW", "Jaguar", "Tata"],
     idx = -1,
     con = document.getElementById("con");
document.getElementById("fab").addEventListener("click", function(){con.value = cars[idx = ++idx%cars.length]});

＆＃13;

<body>
<p id="demo"></p>
<input id="con" value="">
<button id="fab">press</button>
</body>

＆＃13;

按钮单击显示下一个名称

3 个答案: