Javascript .getElementsByClassName isn't working

Question

This code has no errors in console.log, but it doesn't display class name as it should.

document.getElementsByClassName("abc").onmouseover =  function(){mouseOver()};
 function mouseOver(){
 abc.innerHTML = "Class name " + abc.className;
 }

`document.getElementsByClassName("abc")` returns a collection of html elements, you should loop through each of these elements in the collection — iHasCodeForU, Dec 16 '16 at 15:17

score 2 · Answer 1 · answered Dec 16 '16 at 15:17

The .getElementsByClassName() routine returns a list of elements. You cannot directly add event handlers to all elements via the list as you're attempting to do. You have to iterate explicitly:

var abc = document.getElementsByClassName("abc");
for (var i = 0; i < abc.length; ++i) {
  // ...
}

For your purposes, doing that with the Array.prototype.forEach method makes a little more sense, though it looks odd:

var abc = document.getElementsByClassName("abc");
[].forEach.call(abc, function(element) {
  element.onmouseover = function() {
    element.innerHTML = "Class name: " + element.className;
  };
});

Using .forEach ensures that the event handler works properly using a local variable (element) private to each invocation of the loop callback.

@FelixKling yes sure; I was too lazy to verify that `onfoo` type handlers would have `this` correctly bound all the time :) — Pointy, Dec 16 '16 at 17:11

Deep · Answer 2 · 2016-12-16T16:01:09.357

0

document.getElementsByClassName Returns an array-like object of all child elements which have all of the given class names. So you will have to bind the onmousever event with each child object.

https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

You can try like this.

var elements = document.getElementsByClassName("abc")

for (var i=0; i < elements.length; i++) {
  elements[i].onmouseover =  function(){mouseOver(i)};
}

function mouseOver(index){

   document.getElementsByClassName("abc")[index -1].innerHTML = "Class name " + document.getElementsByClassName("abc")[index -1].className;
}

<div class="abc">
  mouse over me
</div>

Edited Answer based on the provided html in comment

<html> <head>   </head> <body> <h1 class="abc">Hello everyone</div>
<script type="text/javascript"> var elements = document.getElementsByClassName("abc"); for (var i=0; i < elements.length; i++) { elements[i].onmouseover = function(){mouseOver(i)}; } function mouseOver(index){ document.getElementsByClassName("abc")[index -1].innerHTML = "Class name " + document.getElementsByClassName("abc")[index -1].className; } </script> </body> </html>

edited Dec 16 '16 at 16:01

answered Dec 16 '16 at 15:26

Deep

9,594
2
21
33

Thanks for the help, but this don't work on chrome. I tried it on jsfiddle and it did work. I don't know what to do... – Frog Dec 16 '16 at 15:44
its working for me on chrome. could you post your code? – Deep Dec 16 '16 at 15:50
Hello everyone – Frog Dec 16 '16 at 15:51
you need to put your script tag just before closing the body tag and put a ; before using for loop – Deep Dec 16 '16 at 16:00
Thank you so much! – Frog Dec 16 '16 at 16:02
you are welcome :) – Deep Dec 16 '16 at 16:05

Javascript .getElementsByClassName isn't working

2 Answers2