How to add event listener for html class?
<p>If I have HTML like this:</p>

<pre><code>&lt;a href="#" class="movieImg"&gt;&lt;div class="previewBulk"&gt;&lt;/div&gt;&lt;/a&gt;
&lt;a href="#" class="movieImg"&gt;&lt;div class="previewBulk"&gt;&lt;/div&gt;&lt;/a&gt;
</code></pre>

<p>and Javascript like this:</p>

<pre><code>var movie = document.getElementsByClassName("movieImg");
var preview = document.getElementsByClassName("preview");
</code></pre>

<p>Is there any way to <code>addEventListener</code> to 2 movie a tag and preview <code>div</code> tag?
I try for loop but when I do something like:</p>

<pre><code>for(var i = 0, j=movie.length; i&lt;j; i++){
 movie[i].style.left = 100;
 preview[i].style.left = 100;
}
</code></pre>

<p>I get  <code>Uncaught TypeError: Cannot read property 'style' of undefined</code>.</p>

<p><strong>After change preview to previewBulk, i still get error, my code actually look like this</strong></p>

<pre><code>(function(){
        var movie = document.getElementsByClassName("movieImg"),
        preview = document.getElementsByClassName("previewBulk");
        //result = [];

        for(var i = 0, j=movie.length; i&lt;j; i++){
            movie[i].addEventListener("mouseover", function(){

                preview[i].style.left = ((movie[i].offsetWidth-preview[i].offsetWidth)/2)+20;
                preview[i].style.top = -(movie[i].offsetHeight+preview[i].offsetHeight);
                preview[i].style.visibility = "visible";
            });

            movie[i].addEventListener("mouseout", function(){
                preview[i].style.visibility = "hidden";
            });
        }
    }());
</code></pre>
