alle <li> einer bestimmten <ul> verändern

[Matze]

Hallo!

Wie der Titel verrät versuche ich in einer Schleife alle <li> einer bestimmten <ul> zu bearbeiten.

Ich habe mich hier, hier und hier durchgelesen und danach folgendes Stück Code versucht

  
var formular = 'formular_name';  
var menu = 'menu_id';  
for (var i = 0; i < document.forms[formular].getElementById(menu).getElementsByTagName("li").length; i++) {  
/* tu etwas */  
}  

Für mich als JS-Neuling sollte es klappen. Tut es aber nicht wie der erfahrene Scripter sicher auf den ersten Blick sieht.
Nur frag ich mich warum. Danach hab ich die Fehlerkonsole befragt. Die sagt mir

"(..)Error:
name: TypeError
message: Statement on line 9: Type mismatch (usually a non-object value used where an object is required)
Backtrace:
  Line 9 of linked script http://localhost/functions/functions.js
    for (var i = 0;i < (document.forms[formular].getElementById(menu).getElementsByTagName("li")).length;i++)
      Line 1 of  script
(..)
  At unknown location"

und

"(..)Error:
name: TypeError
message: Statement on line 9: Could not convert undefined or null to object
Backtrace:
  Line 9 of linked script http://localhost/functions/functions.js
    for (var i = 0;i < (document.forms["formular"].getElementById("menu").getElementsByTagName("li")).length;i++)
      Line 1 of  script
(..)
  At unknown location"

und ein paar weitere gleich lautende Fehler.

Könnte mir bitte jemand helfen und sagen worin mein Fehler liegt?
Also das Formular hat den Namen "formular_name" und die darin liegende Liste die Id "menu_id", genau wie es hier und im Script steht. Alle darin enthaltenen Listenpunkte sollen in einer Schleife abgearbeitet werden. Wie ist das möglich?

Vielen Dank für eure Hilfe!

Grüße, Matze

[EKKi]

Mahlzeit Matze,

var formular = 'formular_name';
var menu = 'menu_id';
for (var i = 0; i < document.forms[formular].getElementById(menu).getElementsByTagName("li").length; i++) {
/* tu etwas */
}

  
Versuch doch mal, nicht alles in einer Anweisung zu schreiben und gib Dir dir erzeugten Objekte mal testweise aus - es sieht nämlich so aus, als ob irgendeins Deiner HTML-Elemente nicht existiert und Javascript deshalb kein entsprechendes Objekt erstellen kann (abgesehen davon, dass bei Deiner Konstruktion bei JEDEM Schleifendurchlauf der DOM-Baum durchsucht werden muss):  
  
~~~javascript
  
var formular = 'formular_name';  
var menu = 'menu_id';  
  
var frm = document.forms[formular];  
alert(frm);  
var mnu = frm.getElementById(menu);  
alert(mnu);  
var lis = mnu.getElementsByTagName('li');  
alert(lis);  
var len = lis.length;  
alert(len);  
  
for (var i = 0; i < len; i++) {  
  /* tu etwas */  
}

MfG,
EKKi

[Matze]

Hallo EKKI!

Versuch doch mal, nicht alles in einer Anweisung zu schreiben und gib Dir dir erzeugten Objekte mal testweise aus - es sieht nämlich so aus, als ob irgendeins Deiner HTML-Elemente nicht existiert und Javascript deshalb kein entsprechendes Objekt erstellen kann

Also im Quelltext steht:

  
<form method="post" action="/index.php" enctype="application/x-www-form-urlencoded" name="formular_name" ><p>(...)</p>  
<ul id="menu_id">  
<li>(...)  

Die Elemente sind also eindeutig vorhanden. Sogar fast direkt nacheinander. Nur ein <p></p> ist dazwischen.

(abgesehen davon, dass bei Deiner Konstruktion bei JEDEM Schleifendurchlauf der DOM-Baum durchsucht werden muss):

Könnte ich das irgendwie besser lösen? Also wie? ;)

var formular = 'formular_name';
var menu = 'menu_id';

var frm = document.forms[formular];
alert(frm);
var mnu = frm.getElementById(menu);
alert(mnu);
var lis = mnu.getElementsByTagName('li');
alert(lis);
var len = lis.length;
alert(len);

for (var i = 0; i < len; i++) {
  /* tu etwas */
}

  
Genau dieser Code gibt mir einen Alert mit [object HTMLFormElement] zurück.  
Mehr nicht. Es sieht also so aus, als ob er die <ul> mit der Id "menu\_id" nicht findet obwohl sie da ist :/  
  
Danke für deine Hilfe!  
  
Grüße, Matze

[Harlequin]

Yerf!

Genau dieser Code gibt mir einen Alert mit [object HTMLFormElement] zurück.
Mehr nicht. Es sieht also so aus, als ob er die <ul> mit der Id "menu_id" nicht findet obwohl sie da ist :/

Das könnte daran liegen, dass die Methode getElementById nur an document aber nicht an Node-Objekten existiert (Da IDs dokumentweit eindeutig sein müssen macht das ja auch keinen Unterschied).

Versuchs mal mit document.getElementById(menu);

Gruß,

Harlequin

[Matze]

Narf!

Das könnte daran liegen, dass die Methode getElementById nur an document aber nicht an Node-Objekten existiert (Da IDs dokumentweit eindeutig sein müssen macht das ja auch keinen Unterschied).

Versuchs mal mit document.getElementById(menu);

Bingo! Danke schön!
So, jetzt muss ich meinen Code nochmal anpassen und probieren. Leider muss ich erstmal kurz weg, aber ich meld mich bei Erfolg oder Misserfolg auf jeden Fall nochmal :)

Grüße, Matze

[Gunnar Bittersmann]

@@Matze:

(abgesehen davon, dass bei Deiner Konstruktion bei JEDEM Schleifendurchlauf der DOM-Baum durchsucht werden muss):

Könnte ich das irgendwie besser lösen? Also wie? ;)

So wie du’s eben getan hast: Den Wert von 'document.forms[formular].getElementById(menu).getElementsByTagName("li").length' in einer Variblen speichern.

for (var i = 0; i < len; i++) {
/* tu etwas */
}

Was genau ist "tu etwas"? Möglicherweise ist deine Schleife völlig unnötig.

Live long and prosper,
Gunnar

[Harlequin]

Yerf!

So wie du’s eben getan hast: Den Wert von 'document.forms[formular].getElementById(menu).getElementsByTagName("li").length' in einer Variblen speichern.

Die Exception wird ihm nicht viel bringen... ;-)

Da muss noch das (überflüssige) forms[formular] raus. Die Methode getElementById ist nur an document verfügbar.

Gruß,

Harlequin

[Matze]

Hallo Gunnar!

So wie du’s eben getan hast: Den Wert von 'document.forms[formular].getElementById(menu).getElementsByTagName("li").length' in einer Variblen speichern.

Danke, hab es entsprechend verkürzt.
Da ich den Formularnamen jetzt auch nicht mehr benötige heißt es jetzt

  
var menu = document.getElementById("menu_id").getElementsByTagName("li");  
for (var i = 0; i < menu.length; i++) {  
/* tu etwas */  
}  

~~~ und funktioniert soweit prima.  
  

> Was genau ist "tu etwas"? Möglicherweise ist deine Schleife völlig unnötig.  
  
Hm mach mir keine Angst, ich hoffe nicht. Jetzt nachdem ich mir wegen so einer Kleinigkeit stundenlang den Kopf zerbrochen hab ;)  
  
Nungut, wie dem Variablennamen zu entnehmen ist, handelt es sich um ein Menü.  
Der jeweils aktive Menüpunkt wird farbig und etwas vergrößert hervor gehoben.  
Wenn ich jetzt auf einen anderen Menüpunkt klicke, sollte der erste Menüpunkt wieder seinen Status "inaktiv" einnehmen.  
  
Meine beiden Ideen waren  
1\.) nach dem Klick auf irgendeinen Menüpunkt werden ALLE Punkte in einer Schleife auf "inaktiv" gesetzt. Nach dem Schleifendurchlauf dann der angewählte Punkt auf "aktiv" und der Event-Handler/Link auf sich selbst wird entfernt.  
2\.) nach dem Klick werden alle Punkte in einer Schleife durchlaufen und EINZELN geprüft ob einer auf "aktiv" steht. Dieser wird dann auf "inaktiv" gesetzt. Nach der Schleife gehts weiter wie bei Idee 1.  
  
Ich hab mich für die zweite Idee entschieden aber häng gerade daran wie ich den aktuellen Listenpunkt in der Schleife anspreche.  
  
Ich denk grad so:  
~~~javascript
  
var menu = document.getElementById("menu_id").getElementsByTagName("li");  
for (var i = 0; i < menu.length; i++) {  
if (menu[i].class == 'aktiv' ) menu[i].class = 'inaktiv';  
}  

Sollte funktionieren oder? Hab es noch nicht getestet.
Oder ist meine Idee völliger Blödsinn?

Danke und Grüße, Matze