javascript - 如何在 for 循环中使用 .getElementsByClassName() 来隐藏 HTML 元素

标签 javascript css for-loop onclick

<分区>

我正在尝试使用 getElementsByClassName 来隐藏具有 onclick 功能的 HTML 元素。 我正在使用 for 循环迭代由 getElementsByClassName 创建的数组。

但是这样我得到了: 未捕获的类型错误:无法读取未定义的属性“样式” 在 HTMLDivElement.circles..onclick

有什么想法吗? 非常感谢。

<div class="circle" id="red-circle"></div>
<div class="circle" id="blue-circle"></div>
<div class="circle" id="yellow-circle"></div>

=============================================

const circles = document.getElementsByClassName("circle")


    for(var i = 0; i < circles.length; i++) {
        circles[i].onclick = () => {
            circles[i].style.display = "none"

        }
    }

最佳答案

你应该改变你的箭头功能:

for(var i = 0; i < circles.length; i++) {

        circles[i].onclick = (e) => {
            e.currentTarget.style.display = "none"
        }
}

e是指鼠标事件,currentTarget是被点击的元素。

关于javascript - 如何在 for 循环中使用 .getElementsByClassName() 来隐藏 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57597346/

相关文章:

javascript - 使用 Javascript .click 插入 Css(为时已晚)

java - 为什么在 while 循环中使用 foreach 循环会出错?

javascript - 奇怪的 JavaScript 错误,由语法、Cytoscape Web 或 jQuery 引起

javascript - extjs 应用架构

html - 为什么输入类型复选框在选中时表现不同?

html - 从内部div继承高度到外部div

html - 我建立的网站上的 iPhone 上没有显示高分辨率图像,而且 3 张图像的宽度不合适

java - 确定玩家上交基于文本的圈和叉

c - 我的 for 循环响应不正确

javascript - 对象不支持属性或方法 'remove'