✔ [JS] input Hintergrundfarbe ändern - Object required?

[the incredible Leitman]

Ich habe erst kürzlich angefangen, mich mit HTML und JavaScript zu beschäftigen...
und schon stoße ich auf die ersten Probleme -.-

In einer JavaScript Methode habe ich nun testweise versucht, die Hintergrundfarbe eines Elements zu ändern.
Das Ganze sieht folgendermaßen aus:

function updateButton() 
{
	var txt="";
	try
	{
		alert("called JS onchangeEvent!");
		label = document.getElementById("username");
		alert("..got label");
		if (label.value != null && label.value != "")
		{
			//label.style.backgroundColor="white";
                        //document.getElementById("username").style["backgroundColor"]="white";
			document.getElementById("username").style.backgroundColor="white";
			alert("..changed bg");
		}
	}
	catch (err)
	{
		txt="There was an error on this page.\n\n";
		txt+="Error description: " + err.description + "\n\n";
		txt+="Click OK to continue.\n\n";
		alert(txt);
	}
}

Damit möchte ich einfach die Hintergrundfarbe eines Textfelds ändern, sobald etwas drinnen seht.

Aufgerufen wird die Methode so:

<input name="username" type="text" value="" style="background:#F8E0E0" size="38" onchange="updateButton()"/>

Wenn ich das Ganze unter Eclipse starte (auf Tomcat) funktioniert das alles einwandfrei:
Textfeld leer -> rosa Hintergrund
Text vorhanden -> weiß

Doch unter Chrome, FF4 und IE8 funktioniert das nicht?

Lediglich beim IE bekomme ich eine Fehlermeldung:
"There was an error on this page.

Error description: Object required

Click OK to continue"

in Chrome 11 steht bei der Fehlerbeschreibung lediglich "undefined",
genauso im FF 3.6.16


Was mache ich falsch? Warum geht das nicht? xD

 

[Netzwerkidi]

Du hast statt id="username" name="username" geschrieben bei dem input-Field.

Die Funktion klappt sonst auf meinen Browsern. Kannste ja mal testen.

function updateButton() {
    c = document.getElementById("userName");
    //if (!c=="") {
       c.style.backgroundColor="white";
    //}
  }

 

[CPoly]

Neben dem von Netzwerkdidi angesprochenen Fehler mit id/name kann man das ganze auch noch komprimieren

<input name="username" type="text" value="" style="background:#F8E0E0" size="38" onchange="updateButton.call(this)" />

function updateButton() 
{
	this.style.backgroundColor = (this.value.length) ? 'white' : '#F8E0E0' ;
}

Du solltest den try-catch Block auch nicht einfach irgendwo hinsetzen. So ist dir nämlich scheinbar die Fehlermeldung entgangen, dass du eben id und name vertauscht hattest. Im Prinzip braucht man try-catch für die Standardsachen nie.

 

[the incredible Leitman]

OMG xD

Danke Netzwerkidi xD
Und ich such mich seit Stunden zum Deppen -.-

Hätte ich mir ja denken können, dass es was einfaches ist... wenn man die id richtig setzt, nach der man sucht, klappt das natürlich auch

Danke dir


EDIT:
@CPoly:
Danke dir auch, für deine Meldung
Den try-catch Block habe ich eben nur für Testzwecke eingebaut, weil es eben nicht ging und ich nicht wusste, warum.
Doch was meinst du mit "irgendwo hin"?

Danke für die kürzere Schreibweise

 

[Netzwerkidi]

CPoly, also Du hast es schon drauf, das muss ich neidlos anerkennen!

Nur warum noch das Call dabei und nicht direkt der Aufruf?
Weil der Button nicht das Input-Feld ist?

Na ja, ich habe noch etwas gefunden dazu, wo Call, Apply usw. gut erklärt werden:
http://odetocode.com/blogs/scott/ar...on-apply-and-function-call-in-javascript.aspx

 

[CPoly]

Doch was meinst du mit "irgendwo hin"?

Du hast den Block um ein "gewöhnliches" Stück Code gepackt wo nichts besonderes passiert oder nichts, was man nicht erwarten könnte. Der try-catch Block ist eher dafür gedacht Sachen abzufangen, die schief gehen können. In JavaScript wird der eher selten benutzt. Angenommen du hast eine Klasse und wirfst dort in einer Methode (via "throw") bewusst eine Exception (oder du benutzt eine Klasse von jemandem), dann musst du die natürlich beim Aufruf abfangen.
Es gibt eben einen Unterschied zwischen Fehlern die der Programmierer macht (wie du eben mit dem vertauschen von name und id) und Fehler, die zum Programm gehören und je nach aüßeren Umständen passieren können (z.B. bei ajax eine fehlerhafte Verbindung). Erstere willst du ja während der Entwicklung mitbekommen und beheben.

CPoly, also Du hast es schon drauf, das muss ich neidlos anerkennen!

Übung

 

[the incredible Leitman]

ah ok, danke für diese ausführliche Erklärung

Wie gesagt, das exception handling habe ich bloß eingeführt um eventuell zu erkennen, warum meine function nicht geht :?

Daraus erschließt sich mir eh die Frage...
warum habe ich dann keine anständige Fehlermeldung bekommen a'la "Element mit id... nicht gefunden"?
Das wär verdammt hilfreich gewesen ^.^
bzw.... warum hat das überhaupt im Eclipse Browser funktionieren können********

 

[CPoly]

Wie gesagt, das exception handling habe ich bloß eingeführt um eventuell zu erkennen, warum meine function nicht geht :?

Ohne try-catch landen alle Fehler in der Fehlerkonsole deines Browsers samt Zeilennummer. Das ist wesentlich komfortabler, als sich selbst im Code darum zu kümmern .

warum habe ich dann keine anständige Fehlermeldung bekommen a'la "Element mit id... nicht gefunden"?

Das liegt daran, dass du dich selbst um die Fehlerabfrage gekümmert hast. Und dabei hast du "err.description" benutzt, was bei mir im Firefox nur "undefined" ausgibt. Hättest du "err.toString()" genommen, hättest du
"TypeError: label is null" bekommen. Und daraus geschlossen, dass "getElementById" null zurück gibt.
In der Fehlerkonsole haben ich und Netzwerkdidi das sofort gesehen und sogar die Zeile angezeigt bekommen

warum hat das überhaupt im Eclipse Browser funktionieren können********

Wieso es im Eclipse Browser funktioniert hat, kann ich dir auch nicht sagen.

 

[the incredible Leitman]

Aaaaah
Jetzt geht mir ein Licht auf

Vielen Dank, das hat mir echt weitergeholfen

Ok, dann danke euch beiden recht herzlich,
ich mach hier mal zu

lg
the incredible Leitman