[JS] input Hintergrundfarbe ändern - Object required?


the incredible Leitman

Erfahrenes Mitglied
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:
Javascript:
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:
Javascript:
<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? o_O

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
 
N

Netzwerkidi

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

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


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

CPoly

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

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

Javascript:
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

Erfahrenes Mitglied
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 :D

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 :)
 
Zuletzt bearbeitet:

CPoly

Mitglied Weizenbier
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

Erfahrenes Mitglied
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

Mitglied Weizenbier
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

Erfahrenes Mitglied
Aaaaah :)
Jetzt geht mir ein Licht auf :D

Vielen Dank, das hat mir echt weitergeholfen :)

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

lg
the incredible Leitman
 

Neue Beiträge

Forum-Statistiken

Themen
272.361
Beiträge
1.558.639
Mitglieder
187.834
Neuestes Mitglied
jordanx0206