Question

Possible Duplicate:
Javascript only sets attribute for last item in array

I’ve just dived into some basic javascript+dom learning, and can’t quite understand only the last element is being toggled? I’m at a lost as to why attaching an event to an element, seems to overwrite the previous ones as well.

JavaScript:

window.onload = function() {
    // Simple log
    var c = function(x) {
        return console.log(x);
    };

    var hasClass = function(ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    };

    var toggleClass = function(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className += " " + cls;


        } else {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            ele.className = ele.className.replace(reg, '');
        }
    };

    var toggle = function(clk) {
        c(clk);
    }

    var el = document.getElementsByClassName('time');
    for (i = 0; i < el.length; i++) {
        var btnToggle = el[i].getElementsByClassName('btn-toggle')[0];
        var clk = el[i].getElementsByClassName('clock')[0];
        btnToggle.addEventListener('click', function() {
            toggle(clk)
        }, false);
    }
};​

HTML:

<section>
    <div class="time">
        <a href="#" class="btn-toggle">Show the time</a>
        <div class="clock">Clock1</div>
    </div>

    <div class="time">
        <a href="#" class="btn-toggle">Show the time</a>
        <div class="clock">Clock2</div>
    </div>

    <div class="time">
        <a href="#" class="btn-toggle">Show the time</a>
        <div class="clock">Clock3</div>
    </div>

</section>

Thanks for your sage advice!

Answer 1

You need to add a closure:

for ( i=0;i<el.length;i++ ) {
    var btnToggle = el[i].getElementsByClassName('btn-toggle')[0];
    var clk = el[i].getElementsByClassName('clock')[0];
    (function(){
        var x = clk;
        btnToggle.addEventListener('click', function(){toggle(x)}, false);
    })();
}

This way, every iteration has a “private” scope, and clk isn’t being overriden.