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

问题描述

今天使用源生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";
        };
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章