JS循环点击元素报错：i.click is not a function 问题咨询

核心错误 #

你犯了两个关键错误：

• i是循环的计数器（数字类型），不是DOM元素，自然没有click方法，这就是报错i.click is not a function的原因。你需要访问spans[i]来获取对应位置的DOM元素。
• 混淆了「触发点击」和「绑定点击事件」：element.click()是直接触发元素的点击行为，不需要传函数参数；如果要给元素绑定点击时执行的回调，应该用addEventListener('click', 回调函数)。

修正后的代码 #

情况1：给每个元素绑定点击事件（点击元素时打印日志）

var spans = document.getElementsByClassName('span');
for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener('click', function() {
        console.log("Clicked");
    });
}

注意：getElementsByClassName返回的是动态HTMLCollection，如果遍历过程中DOM结构变化，集合长度可能会改变。如果要避免这个问题，可以先转成数组：

var spans = Array.from(document.getElementsByClassName('span'));
spans.forEach(function(span) {
    span.addEventListener('click', function() {
        console.log("Clicked");
    });
});

情况2：遍历过程中自动逐个触发元素的点击

如果你的需求是页面加载后自动触发每个元素的点击行为，代码应该是：

var spans = document.getElementsByClassName('span');
// 转数组避免动态集合的问题
var spansArray = Array.from(spans);
spansArray.forEach(function(span) {
    span.click();
    console.log("Clicked");
});

内容的提问来源于stack exchange，提问作者Gibson