时间戳

首页 > 解决方案 > 在 onclick 函数上显示数组递增的元素

javascript - 在 onclick 函数上显示数组递增的元素

问题描述

我正在尝试在单击时一一打印数组元素。这是我实现它的代码。代码的问题是，在第一次单击时它不会增加值，而它假设用新的 +1 数组元素替换旧数组元素。

       function myFunction() {
     var i = 0;
    i++;
        var fruits = ["Banana", "Orange", "Apple", "Mango"];
        document.getElementById("demo").innerHTML = fruits[i];
    }
<button onclick="myFunction()">Try it</button> 
     <p id="demo"></p>

标签： javascriptarrays

解决方案

您总是将i变量设置为 0。将该变量放在myFunction范围之外，它就会起作用。

var i = 0;
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction() {  
  if (i >= fruits.length) i = 0;
   
  document.getElementById("demo").innerHTML = fruits[i];
  i++;
}
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
</script>

但不要忘记，您还可以将数组和元素选择器移出函数范围，使其更简单（并且可能更快）。此外，在再次递增之前检查您是否不会超出数组的边界i。

推荐阅读