[tellric]

Hallo,

ich bin gerade dabei mir JavaScript beizubringen. Ich habe in meinem HTML-Dokument ein div. Dieses hat eine bestimmt Farbe. Wenn ich darauf klicke, dann soll es seine Farbe ändern. Folgender Code funktioniert:


window.onload = clickhandler;

function colorChange(){
document.getElementById("container").style.backgroundColor = "#CCC";
}

function clickhandler(){
document.getElementById("container").onclick = colorChange;
}


Meine Frage ist nun: Wieso funktioniert folgender Code nicht? Zu allererst würde mich interessieren, wieso dieser Code nicht funktioniert - ich will es einfach nur verstehen. Wie er richtig lautet ist zweitrangig, aber würde mich natürlich auch interessieren!
Dieser zweite Code soll es mir ermöglichen, dass ich immer wieder auf das div klicken kann wobei sich dann die Farbe immer wieder ändert.


window.onload = clickhandler;

function colorChange(){
if(document.getElementById("container").style.backgroundColor == "#F39"){
document.getElementById("container").style.backgroundColor = "#CCC";
}
else{
document.getElementById("container").style.backgroundColor = "#F39";
}
}


function clickhandler(){
document.getElementById("container").onclick = colorChange;
}

Tut mir leid - das mit dem Code-Einfügen funkt leider nicht ganz. Ich hoffe, er ist auch so verständlich.


Vielen Dank und Gruß
tellric

[pantonine]

Wo ein Programm fehlschlägt, sagt Dir präzise die Javascript-Fehlerkonsole. Oder die der Entwicklertools resp. Firebug.

Gleich mal angemerkt - besonders gut ist der Code auch nicht. colorChange() ist nicht wiederverwendbar, weil Du die ID in der Fubnktion festverdrahtest, obwohl die im Aufrufkontext doch eigentlich bekannt ist. Auch die andauernde Neu-Referenzierung über getElementById() ist schlechter Stil. Besser wäre, den DOM-Node einer Variablen zuzuweisen.

[tellric]

Wie meinst du das mit dem: Fest verdrahten der Funktion?

Und wie könnte ich das anders machen?

Wenn ich den DOM-Node einer Variablen zuweise:

window.onload = clickhandler;

var myDiv = document.getElementById("container");

function colorChange(){
myDivstyle.backgroundColor = "#CCC";
}


function clickhandler(){
myDivonclick = colorChange;
}



und dann mit diesem weiterarbeite, dann rührt sich leider gar nichts mehr.
Nicht mal mehr bei dem jetzt noch funktionierenden Code.

Vielen Dank für die schnelle Antwort!

[pantonine]

myDivstyle/myDivonclick und myDiv.style/myDiv.onclick sind auch nicht dasselbe.
Und obwohl das ansonsten so über Closures funktionieren würde, empfehle ich Dir, Dich mal mit der Sprache eingehend zu befassen. In diesem Fall mit dem Variablenscope.

[tellric]

myDivstyle/myDivonclick und myDiv.style/myDiv.onclick sind auch nicht dasselbe.

sorry dafür - leider konnte ich meinen Beitrag nicht mehr editieren. Ist mir auch gleich aufgefállen und ich habe es ausgebessert.

Danke für deine Antwort - Vielleicht kennst du einen guten Link, der sich mit Variablenscope beschäftigt.

Wie auch immer: Vielen Dank
tellric

[pantonine]

Vielleicht hier: http://learn.appendto.com/

Die Tutorials sich komplett mal anzusehen lohnt sich.