Question

我是javascript新手。我试图使用单击特定按钮时显示按钮数据的警报。

但是在这里，它始终只是在提醒相同的按钮名称。如何解决？

function getElement(k) {
  var elm = document.getElementById(k);
  /*alert ("hai");*/
  return elm;
}

for (var i = 1; i <= 6; i++) {
  getElement("button" + i).addEventListener("click", function() {
    alert("clicked on button" + i);
  });
}

li {
  list-style: none;
}

<li>
  <div class="button-holder"><button id="button1" class="button">button1</button>
  </div>
</li>
<li>
  <div class="button-holder">
    <button id="button2" class="button">button2</button>
  </div>
</li>
<li>
  <div class="button-holder">
    <button id="button3" class="button">button3</button>
  </div>
</li>
<li>
  <div class="button-holder">
    <button id="button4" class="button">button4</button>
  </div>
</li>

Answer 1

login.errorString = '';
login.focusManager.showFocus();

实际上，每当在for循环内调用addEventListener时，都将继续添加点击侦听器到您的按钮上，并同时增加i值（应小于5，没有第5或第6个按钮。因此一个错误是显示为未捕获的TypeError：无法读取null的属性'addEventListener' ）。

因此，每当您单击按钮时，由于i值已经停留在5上，因此它始终会发出警报：“ Clicked on button5”。

您更想解决此错误的方法是：

function getElement(k) {
  var elm = document.getElementById(k);
  /*alert ("hai");*/
  return elm;
}

for (var i = 1; i <= 6; i++) {
  getElement("button" + i).addEventListener("click", function() {
    alert("clicked on button" + i);
  });
}

Answer 2

根据this的答案，您只需要在Miaan的解决方案中使用 let 而不是 var ：

for (let i = 1; i < 5; i++) {
document.getElementById("button" + i).addEventListener("click", function() {
console.log("clicked on button" + i);
alert("clicked on button" + i);});
}

或者您也可以在for循环中将 var 替换为 let 。应该工作一样。

Java脚本单击功能意外输出

2 个答案: