Flytta skript till extern fil

Jag har den här kodsnutten:

<input name="sok" type="text" value="Sökord"
  onfocus="if(this.value=='Sökord') this.value='';"
  onblur="if(this.value=='') this.value='Sökord';">

Som jag vill ersätta med:

<input name="sok" type="text" value="Sökord">

Samt ett extern skript som gör samma sak. Hur?

window.onload = function(){
    var inp = document.getElementsByTagName("input"),
        len = inp.length;

    while (len--)
        if (inp.item(len).name == "sok"){
            inp.item(len).onfocus = function(){
                if (this.value == "Sökord") this.value = "";
            }

            inp.item(len).onblur = function(){
                if (this.value == "") this.value = "Sökord";
            }

            break;
        }
}

Tack! :D

hmm... Jag vill förstås ha denna funktion på fler inputs :i, så det slutade med följande:

window.onload = function(){
	var inp = document.getElementsByTagName("input"),
		len = inp.length;

	while (len--) {
		if (inp.item(len).name == "sok"){
			inp.item(len).onfocus = function(){
				if (this.value == "Sökord") this.value = "";
			}
			
			inp.item(len).onblur = function(){
				if (this.value == "") this.value = "Sökord";
			}
			
		}
		else if (inp.item(len).name == "email"){
			inp.item(len).onfocus = function(){
				if (this.value == "E-mailadress") this.value = "";
			}
			
			inp.item(len).onblur = function(){
				if (this.value == "") this.value = "E-mailadress";
			}
		}
		else if (inp.item(len).name == "user"){
			inp.item(len).onfocus = function(){
				if (this.value == "Användarnamn") this.value = "";
			}
			
			inp.item(len).onblur = function(){
				if (this.value == "") this.value = "Användarnamn";
			}
		}
		else if (inp.item(len).name == "pass"){
			inp.item(len).onfocus = function(){
				if (this.value == "Lösenord") this.value = "";
			}
			
			inp.item(len).onblur = function(){
				if (this.value == "") this.value = "Lösenord";
			}
		}
	}
}

Vilket funkar. :h Men då ville jag optimera skriptet... så det blev ungefär:

window.onload = function(){
	var inp = document.getElementsByTagName("input"),
		len = inp.length,
		names = Array("sok","email","user","pass"),
		values = Array("Sökord","E-mailadress","Användarnamn","Lösenord");

	while (len--) {
		for (var i=0; i<names.length; i++) {
			if (inp.item(len).name == names[i]){
				inp.item(len).onfocus = function(){
					if (this.value == values[i]) this.value = "";
				}
				
				inp.item(len).onblur = function(){
					if (this.value == "") this.value = values[i];
				}
			}
		}
	}
}

Men det funkar inte... x( Vad gör jag för fel? :stud

Vi kan göra så här istället:

window.onload = function(){
	var inp = document.getElementsByTagName("input"),
		elms = {
			sok: "Sökord",
			email: "E-mailadress",
			user: "Användarnamn",
			pass: "Lösenord"
		};

	for (var p in elms){
		inp[p].onfocus = function(){
			if (this.value == elms[this.name]) this.value = "";
		}
		inp[p].onblur = function(){
			if (this.value == "") this.value = elms[this.name];
		}
	}
}

:o

Tack! (igen) :birp

(Jag måste nog köpa mig en bok om JavaScript eller läsa några guider... ;))

:bire

En bok jag kan rekommendera är David Flanagans JavaScript: The Definitive Guide, 4th Edition.