How to add event listener for html class?

Question

If I have HTML like this:

Answer 1

You have class="previewBulk" and document.getElementsByClassName("preview");

Your code assumes there will be as many elements of the class preview as there are for movieImg, but since you got the class name wrong, there are going to be zero such elements.

Answer 2

document.getElementsByClassName does not return an array. It returns a node list which is traversed like an XML file.

    <a href="#" class="movie"><div class="previewBulk"></div></a>
    <a href="#" class="movie"><div class="previewBulk"></div></a>

    <script>

    var movie = document.getElementsByClassName("movie");

    for(var i = 0; i<movie.length; i++){
      movie.item(i).style.width = "100px";
    }​

    </script>

See jsfiddle: http://jsfiddle.net/Uy5fk/

Answer 3

for(var i = 0, j=movie.length; i<j; i++){
 movie[i].style.left = 100;
 preview[i].style.left = 100;
}

does preview has the same length as movie? if not this gives you an error.

Answer 4

// for each iterates over a list and runs a function for each element
var forEach = Array.prototype.forEach,
    // query selector all runs a CSS selector and returns a list of elements
    // matching the selector
    $$ = document.querySelectorAll.bind(document);

// for each element in the list returned by the CSS selector    
forEach.call($$('.movieImg, .preview'), function(v) {
  // add an event listener to the click event
  v.addEventListener('click', function(e) {
    // and run some event handling code.    
  }, false);
});

Of course there's browser compliance issues. They need to support ES5 & DOM2 events. Use shims for browser compliance.

If you include

• ES5-Shim
• Flow.js

It should fix browser support. Of course FF4/ Chrome /safari5/ ie9 / Opera10+ already support these

Edit:

The problem is actually the "closures inside loops problem" as described in the javascript garden

Answer 5

No tags with classname preview so

var preview = document.getElementsByClassName("preview");

will cause that error

this line must be as follows

var preview = document.getElementsByClassName("previewBulk");

and as @raym0nd said the number of div tags must be equal to the number of a tags

EDIT

the problem with your code is you used the index of for loop inside the anonymous function but this function is called with mouseout and mouseover event and after finishing the for loop try the following

var movie = document.getElementsByClassName("movieImg");

    for(var i = 0, j=movie.length; i<j; i++){
        movie[i].addEventListener("mouseover", function(){
        var preview = this.getElementsByClassName("previewBulk")[0];
                          preview.style.left = ((this.offsetWidth-preview.offsetWidth)/2)+20;
            preview.style.top = -(this.offsetHeight+preview.offsetHeight);
            preview.style.visibility = "visible";
        });

        movie[i].addEventListener("mouseout", function(){
            var preview = this.getElementsByClassName("previewBulk")[0];
            preview.style.visibility = "hidden";
        });
    }

or test in jsFiddle