Question

点击按钮＆＃39; hi＆＃39;和＆＃39; helo＆＃39;必须根据计划将'.admin-text'的内容更改为相应的文字，但只需将其更改为'undefined'。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

你几乎就在那里 - 你需要在let - 循环中使用var而不是for，否则i等于所有侦听器函数中的2：< / p>

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由引用传递，而不是由<传递< em> value ，因此所有听众共享相同的i。在最后一次迭代之后，for - 循环执行的最后一件事是i++，因此i等于2.因此，您的侦听器会尝试访问infra_html[2] undefined因为你的数组没有带索引的元素。

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

Answer 2

问题出现在你的循环中

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

当客户端事件处理程序触发时，我将为3，因为循环先前已结束。你应该创建一个闭包。

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

或使用let创建块范围变量，如其他答案所示

JS - 单击按钮将元素的文本更改为undefined

2 个答案: