JavaScript get Elements By Class Name

Question

Why is my code for getElementsByClassName not working? It works when using getElementById but not with a class? I am using the TweenLite extension.

my code that does not work- http://codepen.io/bleubateau/pen/pvbeaO the same code that works with ID- http://codepen.io/bleubateau/pen/ogLZqb similar code that does work with the class- http://codepen.io/bleubateau/pen/PwzpQj

window.onload = function() {
  var play = document.getElementById("lay");

play.onmouseover = function(){
    TweenMax.to(play, 0.5, {width:"120px", marginLeft:"-60px", marginTop:"-60px", repeat:-1, repeatDelay:0.1, yoyo:true});

};

play.onmouseout = function(){
    TweenLite.to(playBTN, 1, {width:"100px", marginLeft:"-50px", marginTop:"-50px"});
};
}

Remember that when using class name, it returns an array, even when it's a single object ... `document.getElementById("lay")[0]` — rfornal, Dec 18 '14 at 01:22
Impossible to help without seeing your HTML - please include it in your question. — Madbreaks, Dec 18 '14 at 01:24
Better to use `document.querySelectorAll('.lay')[0]` as it's more widely supported than *getElementsByClassName*. — RobG, Dec 18 '14 at 01:31

score 3 · Accepted Answer · edited Dec 18 '14 at 01:32

3

getElementsByClassName() generates a node list, so even if your list contained only one item, you would still need to access it like so:

var play = document.getElementsByClassName('lay')[0];

edited Dec 18 '14 at 01:32

Felix Kling

795,719
175
1,089
1,143

answered Dec 18 '14 at 01:26

Marventus

864
1
7
14

Nit: It creates a **`NodeList`**, not an array. – Felix Kling Dec 18 '14 at 01:27
@FelixKling—not really nit picking, the NodeList is live so may have some unexpected behaviour. ;-) – RobG Dec 18 '14 at 01:29

JavaScript get Elements By Class Name

1 Answers1