getElementsByClassName()获取元素后onclick事件无效解决办法

最新推荐文章于 2025-07-15 11:50:59 发布

原创最新推荐文章于 2025-07-15 11:50:59 发布 · 9.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #onclick

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文探讨了使用原生JS实现点击按钮关闭对应div功能时遇到的问题，详细解析了getElementById与getElementsByClassName的区别，提供了有效的解决方案。

问题描述

今天使用源生js实现 点击按钮关闭对应div功能（有多个按钮，相同class名），出现onclick无效情况。

问题原因

使用getElementById获取元素的结果是：当前元素
使用getElementsByClassName获取元素的结果是：相同class名元素数组。

解决办法

	var div = document.getElementById("div");
    console.log("getElementById: ");
    console.log(div);

    var btn = document.getElementsByClassName("btn");
    console.log("getElementsByClassName: ");
    console.log(btn);

    // 解决办法
    for(var i = 0;i < btn.length;i++){
       	btn[i].onclick=function(){
        	// 通过js实现div隐藏
	        div.style.display = "none";
        };
    }