JS getElementsByClassName() doesn't work with multiple elements having same class

Question

Problem : this is not working!!

HTML

<div id="circle1" class="circle"></div>
<div id="circle2" class="circle"></div>
<div id="circle3" class="circle"></div>

JS

var circle = document.getElementsByClassName('circle');
        circle.onmouseover = function(){  /* This is not working */
           document.write("Hovering over one of the element that contains circle class");
        }

`getElementsByClassName()` provides a list. You need to iterate it (for loop) and assign the event to each element of it. — Lain, May 09 '18 at 14:26
I'd say the dupe target is more of an answer to their problem than a dupe.... — Feathercrown, May 09 '18 at 14:37

jom · Accepted Answer · 2018-05-09T14:38:29.283

-2

var circle = document.getElementsByClassName("circle");
for (i = 0; i < circle.length; i++) {
    circle[i].onmouseover = function(){  /* This is not working */
           document.write("Hovering over one of the element that contains circle class");
        }
}

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementsbyclassname_loop

edited May 09 '18 at 14:38

answered May 09 '18 at 14:33

jom

56
1
8

Works!!!!!! ;) humanity is alive Thanks!!! – AnmolTheDeveloper May 09 '18 at 14:38
please vote !!! – jom May 09 '18 at 14:40
thanks.in the future,if the problem happens,please say to me. – jom May 09 '18 at 14:42
1

There is no need for global variables here. – Lain May 09 '18 at 17:26
Mr.Lain. Don't take care here!This is the correct code! – jom May 09 '18 at 23:40

JS getElementsByClassName() doesn't work with multiple elements having same class

1 Answers1