Why is my loop adding classes to the last item in the loop?
<p>I'm trying to bind events to 8 items with the class-name image, this works:</p>

<pre><code>    var images = document.getElementsByClassName('image');

    Array.from(images).forEach(function(image) {
       image.onmouseup = function(){


        //expand
        var iframe = image.getElementsByTagName('iframe')[0],
            player;
        image.classList.add('focus');

    };
});
</code></pre>

<p>but when I try to use a normal for-loop like this, the only item get's the class focus, i can click any item though.</p>

<pre><code>var images = document.getElementsByClassName('image');


for(var i = 0; i &lt; images.length; i++){
    var image = images[i];

    image.onmouseup = function(){


        //expand
        var iframe = image.getElementsByTagName('iframe')[0],
            player;
        image.classList.add('focus');

    };
};
</code></pre>