Question

请，我需要一些帮助。我想对数组使用for循环，我想使用按钮一一获取值。

我要单击并获得->“ A”，
当我再次单击并获得->“ B”时，
当我再次单击并获得->“ C”
...

当我使用for循环时，我只会得到最后一个值您可以查看和编辑代码here。

如何在数组中使用for循环并通过单击来逐个获取值：

var myArray = ["A", "B", "C", "D", "E", "F"];

var display = document.getElementById("display");
var x = 0;

function oneByOne() {
    for (i = 0; i < myArray.length; i++) {
    display.innerHTML = myArray[i]; // Result => "F"
 }
}

类似于以下代码：

display.innerHTML = myArray[0];

function oneByOne() {
 x++;
 if (x < myArray.length) {
   display.innerHTML = myArray[x];

} else {
   display.innerHTML = "End";
 }
}

HTML代码：

<h1 id="display"></h1>
<button onclick="oneByOne()"> One By One </button>

Answer 1

好的，在您澄清之后，这里是有效代码：

var myArray = ["A", "B", "C", "D", "E", "F"];

var display = document.getElementById("display");

var x = 0;

function oneByOne() {
  if (x < myArray.length) {
    display.innerHTML = myArray[x];
  } else {
    display.innerHTML = "End";
  }
  x++;
}

<h1 id="display"></h1>
<button onclick="oneByOne()"> One By One </button>

Answer 2

与while循环相比，for循环更容易用于“一对一” 操作。无论哪种方式，循环都将继续遍历数组直到结束-因此您需要暂停或停止循环，以便单击时仅显示一次迭代。您还必须通过在循环外部（或函数外部的情况）声明增量来记住循环中的位置，以免将其重置为0。BTW您在函数外部声明了x=0（很好），但然后在循环内有了全局i变量（没有var）（不好）。

第一个示例是while循环。注意break打破了循环，允许回调函数捕获每个循环。第二个示例是for循环。与其返回break，而是停止循环。记住它在循环中的位置的方法是在返回数组时增加数组括号内的索引。

const array = ["A", "B", "C", "D", "E", "F"];

////////////  X1 BY WHILE LOOP //////////////
const button1 = document.querySelector('.button1');
const display1 = document.querySelector(".display1");

let x1 = 0;

function oneByOne1(e) {
  while (x1 < array.length) {
    display1.innerHTML = array[x1];
    break;
  }
  x1++
}

button1.onclick = oneByOne1;

////////////  X1 BY FOR LOOP ////////////////
const button2 = document.querySelector('.button2');
const display2 = document.querySelector(".display2");

let x2 = 0;

function oneByOne2(e) {
  for (x2; x2 < array.length; x2++) {
    return display2.innerHTML = array[x2++];
  }
}

button2.onclick = oneByOne2;

:root {
  font-family: Consolas
}

<button class='button1'>X1</button> while loop...X1: <output class='display1'></output><br>
<button class='button2'>X2</button> for loop.....X2: <output class='display2'></output>

如何使用带有数组的循环并通过单击一个接一个地获取价值

2 个答案: