Question

我试图在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>

Answer 1

您始终将i变量设置为0。将该变量移出myFunction范围，它将起作用。

var i = 0;
function myFunction() {  
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits[i];
  i++;
}

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
</script>

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

Answer 2

具有循环功能的更新代码。

var i = 0;
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction() {  
  
  document.getElementById("demo").innerHTML = fruits[i];
  i++;
  if(i == fruits.length){i = 0;}
}

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

在onclick函数上显示数组元素一一递增

2 个答案: