astupidname - 8:59 pm on May 8, 2009 (gmt 0)

window.onload = function(){ if(document.getElementById('myform')){ ffields = document.getElementById('myform').getElementsByTagName('input'); var formDefaultVal = new Array("name", "surname","email"); for(f in ffields){ ffields[i].onclick = function(){ if(this.value==smallFormVal[i]){ this.value=''; }} ffields[i].onblur= function(){ if(this.value==''){ this.value=smallFormVal[i]; }} } } }

One problem I see, is that I don't even see the variable i's value defined anywhere's in there ( although even if you do define i you will still have roughly the same problem ). The variable i within the onclick and onblur functions being defined will be evaluated at the time those functions are invoked, not within the loop. So when the functions are actually invoked i's value will be whatever it is at the end of the loop. The way to fix it is to force i to be evaluated at the time it is installed into the onclick or onblur function by feeding i to another function which returns the function that will be the event handler (note I don't see smallFormVal defined anywhere's either, am assuming you intended to use formDefaultVal instead?):

window.onload = function(){ if(document.getElementById('myform')){ var ffields = document.getElementById('myform').getElementsByTagName('input'); var formDefaultVal = ["name", "surname","email"]; //new Array declaration not needed, just use [] for (var i = 0; i < ffields.length; i++){ ffields[i].onclick = (function(val){ return function () { if(this.value==val){ this.value=''; } }; })(formDefaultVal[i]); //outer anonymous function is invoked //and formDefaultVal[i] is passed in as an argument to val, //the outer anonymous function returns the inner anonymous function //which becomes the event handler ffields[i].onblur= (function(val){ return function () { if(this.value==''){ this.value=val; } }; })(formDefaultVal[i]); } } };

The above is the best way to fix the problem, it is entirely similar to the below (although this is not really desirable, usually), just for demo to show what is happening when the onclick and onblur's are set above:

function returnOnClickFunction(val) { return function () { if (this.value == val) { this.value = ''; } }; } function returnOnBlurFunction(val) { return function () { if (this.value == '') { this.value = val; } }; } window.onload = function(){ if(document.getElementById('myform')){ var ffields = document.getElementById('myform').getElementsByTagName('input'); var formDefaultVal = ["name", "surname","email"]; for (var i = 0; i < ffields.length; i++){ ffields[i].onclick = returnOnClickFunction(formDefaultVal[i]); ffields[i].onblur = returnOnBlurFunction(formDefaultVal[i]); } } };