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的按钮时，我希望我可以运行循环并且能够将每个按钮分配为可点击而不是尽可能多地编写行。

如何在javascript中为for循环分配onclick？

Answer 1

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

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

当然，现在你的函数会收到一个事件参数而不是一个id。（在循环中传递id是一个巨大的痛苦;最简单的解决方法是不打扰尝试。）但它也将附加元素作为this，这很方便：

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

其他评论：

如果您没有指定包含已知HTML的字符串，则应尽量不要习惯使用innerHTML。使您免于必须关心转义。请改用textContent。
分配给onclick有点不灵活;你只能用这种方式分配一个点击处理程序，如果你不小心覆盖现有的处理程序，很难注意到。使用addEventListener。
getElementById(element.id)肯定相当于element。
不要在JavaScript中使用HTML评论！ :)它们只适用于...奇怪的向后兼容性原因。 JavaScript评论可以是// ...或/* ... */。
最好不要将函数名称大写，除非它应该是构造函数;您可能会注意到，此突出显示使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);
}

Answer 2

因此，由于for循环位于函数中，因此基本上不需要调用for循环。如果要在for循环中调用所有变量和语句，则可以将语句放在函数中，然后在函数外部但在脚本内部调用该函数。

如何在javascript中为for循环分配onclick？

2 个答案: