代码之家 › 专栏 › 技术社区 › ADH - THE TECHIE GUY

Java脚本点击函数意外输出[复制]

html javascript

ADH - THE TECHIE GUY · 技术社区 · 7 年前

这个问题已经有了答案:

JavaScript closure inside loops â simple practical example 43个答案

我不熟悉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>

2 回复 | 直到 7 年前

ColJarmen 7 年前

this

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

Amiya Kumar 7 年前

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

 

var btn = document.querySelectorAll('.button');

 for(var i = 0; i < btn.length; i++) {
   btn[i].addEventListener("click", function(){
     alert("Clicked on " + this.innerText);
   });
 }

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

6 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前