Javascript Listens For Events Only On The Last Node Specified

So I am working on a simple gui. The problem is that ONLY the last textarea seems be affected by the script. All the previous do not react at all. (check the screenshot) document.a

Solution 1:

Closure inside function:

document.addEventListener("DOMContentLoaded", function (){

// Interactive textareasvar txta = document.getElementsByTagName('textarea');
for (var i = 0; i < txta.length; i++){
    var earse = txta[i].value;
    console.log(earse); // debugging
    (function(earse){
            txta[i].addEventListener('focus', function(e){
                    if (e.target.value === earse) {
                            e.target.value = "";
                            e.target.addEventListener('blur', function(e){
                                    if (e.target.value === "") {
                                            e.target.value = earse;
                                    }
                            }, false);
                    }
            }, false);
        })(earse);
    console.log(txta[i]); // debugging
};

}, false);

http://jsfiddle.net/WjV8n/

For comment: You need closure varible earse inside loop. Because every step you change this varible.