Neuer "className" wird ungültig zugewiesen

[Emanuel]

Hallo Leute!

Ich habe ein, meiner Meinung nach merkwürdiges Problem mit einer Klassennamenzuweisung mittels Javascript.

Folgende Struktur (Auszug aus dem Dokument):

  
<ul>  
  <li id="new" class=""><a href="#" onmouseover="setHover('new')" onmouseout="unsetHover('new')" onclick="View('new');document.getElementById('new').className='selected';">Neu</a></li>  
</ul>

Bei Klick auf den Link, soll dem <li> Element die Klasse "selected" zugewiesen werden.
Das Problem ist, wenn ich auf den Link klicke wird die Klasse nicht geändert und laut neu generiertem Quelltext vom FF hat das <li> Element die Klasse "undefined".
Wenn ich mir aber vor der eigentlichen Zuweisung den Klassennamen anzeigen lasse:

  
...onclick="View('new');alert(document.getElementById('new').className);document.getElementById('new').className='selected';"...

wird dem <li> Element die Klasse "selected" richtig zugewiesen.

Andersrum, wenn ich mir den Klassennamen nach der Zuweisung per alert ausgeben lasse, wird mir zwar im alert der richtige Klassenname angezeigt aber nicht für das Element übernommen (FF neu generiertet Quelltext zeigt wieder class="undefined")
Eine Überprüfung der Klassenänderung gibts per CSS durch Änderung des Hintergrundbildes des <li> Elements.
Im 1. und 3. Fall wird das Hintergrundbild nicht geändert, im 2. Fall (alert vor Zuweisung) schon.

Wo liegt der Fehler?
MfG Emanuel

[Der Martin]

Hallo,

Ich habe ein, meiner Meinung nach merkwürdiges Problem mit einer Klassennamenzuweisung mittels Javascript.
[...]
Wo liegt der Fehler?

kann ich im Moment auch noch nicht erkennen. Aber ...

Wenn ich mir aber vor der eigentlichen Zuweisung den Klassennamen anzeigen lasse:
onclick="View('new');alert(document.getElementById('new').className);document.getElementById('new').className='selected';"...

wird dem <li> Element die Klasse "selected" richtig zugewiesen.

... das wirft zwangsläufig die Frage auf: Was macht die Funktion View()?

Andersrum, wenn ich mir den Klassennamen nach der Zuweisung per alert ausgeben lasse, wird mir zwar im alert der richtige Klassenname angezeigt aber nicht für das Element übernommen (FF neu generiertet Quelltext zeigt wieder class="undefined")

Meine Vermutung ist, dass du durch die Eventhandler onmouseover und onclick temporär irgendwas am DOM veränderst, was getElementById() scheitern lässt. Gibt es Fehlermeldungen (in der Fehlerkonsole)? Welche?

So long,
 Martin

[Emanuel]

... das wirft zwangsläufig die Frage auf: Was macht die Funktion View()?

Bei dem ganzen handelt es sich um die Joomlakomponente JAM, vielleicht hilft das ja.
Der oben beschriebene Listenpunkt ist Teil eines Menüs, das beim klicken des Links den angezeigten Content ändert (per AJAX).
Ich möcht eigentlich nur die Listenpunkte hervorheben die gerade markiert sind. Die Funktion View() lädt den jeweiligen Content.

Die ids für die Listenelemente hab ich nachträglich eingesetzt, kommen nirgendwo sonst vor und sollten daher eindeutig zuordenbar sein mittels getElementById() - dachte ich zumidnest.
Ich habe versucht die Klassenzuweisung vor, in und nach der View Funktion einzusetzen, immer mit dem gleichen oben beschriebenen Ergebnis.
Die setHover und unsetHover Funktionen hab auch ich eingebaut und Funktionieren ohne Probleme, der Listenpunkthintergrund ändert sich entsprechend und da arbeite ich auch mit getElementById().

Meine Vermutung ist, dass du durch die Eventhandler onmouseover und onclick temporär irgendwas am DOM veränderst, was getElementById() scheitern lässt. Gibt es Fehlermeldungen (in der Fehlerkonsole)? Welche?

Fehlerkonsole in FF bzw. IE8 zeigen beide nichts an.
Ich verstehe nicht, wieso die Zuweisung der Klasse funktioniert, wenn davor ein alert ausgelöst wird. Macht das Sinn?

[Der Martin]

Hallo,

Bei dem ganzen handelt es sich um die Joomlakomponente JAM, vielleicht hilft das ja.

mir nicht, ich kenne Joomla nur dem Namen nach.

Ich verstehe nicht, wieso die Zuweisung der Klasse funktioniert, wenn davor ein alert ausgelöst wird. Macht das Sinn?

Nicht wirklich. Es ist aber ein Hinweis darauf, dass es irgendein Jetzt-noch-nicht- oder ein Jetzt-nicht-mehr-Effekt sein könnte.

Ciao,
 Martin

[Emanuel]

Nicht wirklich. Es ist aber ein Hinweis darauf, dass es irgendein Jetzt-noch-nicht- oder ein Jetzt-nicht-mehr-Effekt sein könnte.

Außerdem versteh ich nicht, wieso er im neu generierten Quelltext class="undefined" einträgt, obwohl das "undefined" meines Wissens nur von einer nicht definierten JS Variable kommen kann ich aber nirgendwo den Klassennamen per Variable zuweise sondern nur "hardgecoded" eintrage.
Also entweder className="selected" oder className="".

[Beat]

<li id="new" class=""><a href="#" onmouseover="setHover('new')" onmouseout="unsetHover('new')" onclick="View('new');document.getElementById('new').className='selected';">Neu</a></li>
</ul>[/code]

Warum so umständlich?
onclick="View('new');this.className='selected';"

Ich nehme an, du hast nur ein Element mit id="new".

mfg Beat

[Emanuel]

onclick="View('new');this.className='selected';"

Ich möchte die Klasse des <li> Elements ändern, nicht des <a> Elements.

Ich nehme an, du hast nur ein Element mit id="new".

Ja..

[Der Martin]

Hallo,

<li id="new" class=""><a href="#" onmouseover="setHover('new')" onmouseout="unsetHover('new')" onclick="View('new');document.getElementById('new').className='selected';">Neu</a></li>
</ul>[/code]

Warum so umständlich?
onclick="View('new');this.className='selected';"

daran dachte ich auch zuerst.

Ich nehme an, du hast nur ein Element mit id="new".

Ja. Aber es ist nicht identisch mit dem Element, in dem der Eventhandler notiert ist - daher ist this nicht der Schlüssel zum Glück (außer vielleicht this.parentNode). Allerdings ist das ein alternativer Ansatz, die Eventhandler im li-Element zu notieren und nicht im Link.

So long,
 Martin

[ChrisB]

Hi,

<ul>
  <li id="new" class=""><a href="#" onmouseover="setHover('new')" onmouseout="unsetHover('new')" onclick="View('new');document.getElementById('new').className='selected';">Neu</a></li>
</ul>

  

> Das Problem ist, wenn ich auf den Link klicke wird die Klasse nicht geändert und laut neu generiertem Quelltext vom FF hat das <li> Element die Klasse "undefined".  
  
Und was machen die Funktionen setHover und unsetHover, die offenbar auch den Wert des id-Attributes des LI-Elementes übergeben bekommen, und diesen dann vermutlich auch zum Zugriff auf eben dieses LI nutzen werden?  
  
MfG ChrisB  
  

-- 
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]

[Emanuel]

Und was machen die Funktionen setHover und unsetHover, die offenbar auch den Wert des id-Attributes des LI-Elementes übergeben bekommen, und diesen dann vermutlich auch zum Zugriff auf eben dieses LI nutzen werden?

Diese ändern mir die Klasse des <li> Elements wodurch sich das Hintergrundbild ändert - und das funktioniert auch (setHover macht das: document.getElementById('new').className='hover'; und unsetHover macht das: document.getElementById('new').className='';)

Das geschieht eben wenn man mit der Maus darüber fährt und durch das onclick möcht ich das Hintergrundbild "permanent" ändern, wenn der neue Content geladen wird.

[ChrisB]

Hi,

Diese ändern mir die Klasse des <li> Elements wodurch sich das Hintergrundbild ändert - und das funktioniert auch (setHover macht das: document.getElementById('new').className='hover'; und unsetHover macht das: document.getElementById('new').className='';)

Das geschieht eben wenn man mit der Maus darüber fährt und durch das onclick möcht ich das Hintergrundbild "permanent" ändern, wenn der neue Content geladen wird.

Und wo hast du dafür gesorgt, dass nicht kurz nach dem Klick dann wieder MouseOut die Klasse, die du gerade „permanent” setzen wolltest, gleich wieder ändert?

MfG ChrisB

[Emanuel]

Und wo hast du dafür gesorgt, dass nicht kurz nach dem Klick dann wieder MouseOut die Klasse, die du gerade „permanent” setzen wolltest, gleich wieder ändert?

Hmm, bis jetzt hatte ich noch nicht dafür gesorgt, das erklärt dann auch wieso es mit dem alert funktioniert hat :)
Gut, dass ich nur 3 Stunden an diesem Problem gesessen bin, danke! :)
-SOLVED-