How to use .getElementsByClassName() on a for Loop to hide HTML elements

Question

I'm trying to use getElementsByClassName, to hide HTML elements with onclick function. I'm using a for loop to iterate the array created by getElementsByClassName.

But this way I'm getting a: Uncaught TypeError: Cannot read property 'style' of undefined at HTMLDivElement.circles..onclick

Any ideas? Thanks a lot in advance.

<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"

        }
    }

score 2 · Accepted Answer · answered Aug 21 '19 at 18:36

2

You should change your arrow function:

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

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

e refers to mouse event, and currentTarget is the clicked element.

answered Aug 21 '19 at 18:36

Saman Gholami

3,416
7
30
71

That was it! Thanks a lot Saman Gholami. – Paulo Rigter Aug 22 '19 at 17:55
@PauloRigter Your welcome. You can choose it as the best answer. – Saman Gholami Aug 24 '19 at 10:48

How to use .getElementsByClassName() on a for Loop to hide HTML elements

1 Answers1