javascript - JS - 单击按钮将元素的文本更改为未定义

Question

点击‘hi’和‘helo’按钮必须按照计划将'.admin-text'的内容更改为各自的文本，但它只是将其更改为'未定义'。

var admin_text = document.querySelector('.admin-text');

var infra_btns = [document.getElementById('hi'), document.getElementById('helo')];


var infra_html = ["<p>hi</p>", "<p>helo</p>"];

for(var i = 0; i < 2; i++)
{
  infra_btns[i].addEventListener('click', function() {
    admin_text.innerHTML = infra_html[i];
  });
}

<div class="admin">
  <div class="admin-nav">
    <button class="adminbtns" id="hi">hi</button>
    <button class="adminbtns" id="helo">helo</button>
  </div>

  <div class="admin-text">

  </div>
</div>

Answer 1

你就快到了 - 你需要在 for 循环中使用 let 而不是 var，否则 i 在所有监听器函数中等于 2:

var admin_text = document.querySelector('.admin-text');

var infra_btns = [hi, helo];


var infra_html = ["<p>hi</p>", "<p>helo</p>"];

for (let i = 0; i < 2; i++) {
  infra_btns[i].addEventListener('click', function() {
    admin_text.innerHTML = infra_html[i];
  });
}

<div class="admin">
  <div class="admin-nav">
    <button class="adminbtns" id="hi">hi</button>
    <button class="adminbtns" id="helo">helo</button>
  </div>
  <div class="admin-text"></div>
</div>

发生这种情况是因为使用 var 声明的变量具有函数作用域，并且监听器函数中的 i 通过引用传递 strong>，而不是按值，因此所有听众共享相同的i。在最后一次迭代之后，for 循环所做的最后一件事是 i++，因此 i 等于 2。因此您的监听器尝试访问 infra_html[2] 这是未定义，因为您的数组没有具有该索引的元素。

这篇文章详细解释了:JQuery not appending correct value to unordered list