如何使用innerHTML 显示数组的值？答案

【问题标题】：how to display the value of an array using innerHTML?如何使用innerHTML 显示数组的值？
【发布时间】：2022-10-13 21:42:40
【问题描述】：

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

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++;
        }
    });

}

【问题讨论】：

欢迎来到堆栈溢出！当您遇到困难时，我们会帮助您，但我们不会为您编写代码。请先自己尝试一下，当您有具体问题时再回来。

标签： javascript

【解决方案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>

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

【讨论】：