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

Question

单击"hi"和"helo"按钮必须'.admin-text'根据计划更改相应文本的内容,但只需将其更改为'undefined'.

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

你几乎就在那里 - 你需要使用let而不是var在你的for-loop中,否则在你的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在侦听器函数是由传递引用,而不是价值,因此所有听众共享相同i.在最后一次迭代之后,for-loop做的最后一件事是i++,所以i等于2.所以你的监听器试图访问infra_html[2]哪个是undefined因为你的数组没有带有该索引的元素.

这篇文章详细解释了它:JQuery没有将正确的值附加到无序列表