如何使用innerHTML显示数组的值

Question

我有一个数组n我有四个按钮n我只想显示数组值，如果我点击第一个按钮，第一个值应该显示，点击第二个按钮，第二个值应该使用addEventListener事件处理程序显示n等等，但当我点击它直接显示最后一个值时有问题吗？

var element = document.querySelectorAll('.box1');
var city = document.querySelector('#name');
for (var i = 0; i < element.length; i++) {
element[i].addEventListener('click', function () {
var i = 0;
var places = ['San diago,USA', 'chicago,USA', 'phoenix,USA', 'New york,USA'];
while (i <places.length) {
console.log(city.innerHTML = places[i]);
i++;
}
});

}

Answer 1

您在按钮列表上迭代，然后在每个处理程序内部也在整个列表上迭代(使用相同的变量i(。每个按钮只需要一个处理程序，所以您只需要一次循环。

我把你的"；城市；数组，没有理由在每个处理程序中单独定义它。

const places = ['San diego,USA', 'chicago,USA', 'phoenix,USA', 'New york,USA'];
let element = document.querySelectorAll('.box1');
let city = document.querySelector('#name');
for (let i = 0; i < element.length; i++) {
element[i].addEventListener('click', function() {
city.innerHTML = places[i];
});
}

<button class="box1">One</button>
<button class="box1">Two</button>
<button class="box1">Three</button>
<button class="box1">Four</button>
<div id="name"></div>

特别注意在for循环中使用let i而不是var i——ES6变量的作用域不同；如果我在那里使用了var，那么在循环运行之后，所有四个事件都将获得i的值(因此所有按钮都将查找places[4]！(。对于let或const，变量的作用域在其块中，因此循环中的每次迭代都会捕获所需的值。