javascript - 如何在 JavaScript 的 for 循环中分配 onclick ？

Question

function initnav(){
var cbox=document.getElementsByClassName('box');
for(var i=0;i<cbox.length;i++){
    cbox[i].innerHTML=cbox[i].id;
    <!--so far I have set their captions after setting their ids same as how I want them            to appear.-->

    <!--what comes next is what doesn't really work.-->
    getElementById(cbox[i].id).onclick=Mclick(cbox[i].id);
}

};

function Mclick(id){alert(id);}

整个内容都在一个 js 文件中，并立即从我的 html 文件链接。

按照计划，所有按钮都应该出现并且可单击，但实际情况是只有其中一个按钮可见，而当我单击它时，该按钮不起作用。

当我创建大量面向 div 的按钮时，我希望可以运行 for 循环并能够将每个按钮指定为可点击，而不是编写尽可能多的行。

如何在 JavaScript 中的 for 循环中分配 onclick ？

Answer 1

您正在调用该函数而不是分配它。

getElementById(cbox[i].id).onclick = Mclick;

当然，现在您的函数将接收事件参数而不是 ID。 (在循环内传递 id 是一个巨大的痛苦；最简单的解决方法就是不要尝试。)但它也将附加元素获取为 this，这很方便:

function Mclick() {
    alert(this.id);
}

其他评论:

1. 如果您没有分配包含已知 HTML 的字符串，则应尽量不要养成使用 innerHTML 的习惯。使您不必担心逃跑。请改用 textContent。
2. 分配给onclick有点不灵活；您只能以这种方式分配一次单击处理程序，并且如果您不小心覆盖了现有处理程序，则很难注意到。使用addEventListener .
3. getElementById(element.id) 肯定应该等同于 element。
4. 不要在 JavaScript 中使用 HTML 注释! :) 它们只适用于......奇怪的向后兼容性原因。 JavaScript 注释为 //... 或 /* ... */。
5. 最好不要将函数名大写，除非它应该是构造函数；您可能会注意到 SO 的突出显示使 Mclick 变成绿色，因为它认为这是一个类名。

所以我最终会得到:

function initnav() {
    var cbox = document.getElementsByClassName('box');
    for(var i = 0; i < cbox.length; i++) {
        cbox[i].textContent = cbox[i].id;
        cbox[i].addEventListener('click', alert_id);
    }
}

function alert_id(event) {
    alert(this.id);
}