klickme: zugriff via js auf mehrere id's im html

ich versuche mit folgendem skript auf mehrere id's im html-bereich zugreifen.
habs mit folgender version versucht, doch irgendwie funktionierst nicht.
was mache ich falsch???

startList = function(wert) {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("wert");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}

}

window.onload= function(){
startList('id1');
startList('id2');
}</script>

  1. hi,

    was mache ich falsch???

    Wenn das

    startList = function(wert) {

    deine Funktionsdefinition sein soll - http://de.selfhtml.org/javascript/sprache/funktionen.htm#definieren

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo,

      diese Deklaration einer Funktion gibt es. Ist das nicht eine "anonyme" Funktion? Das gibts aber nur bei "Objektorientierten JS", wenn ich mich nich irre. Z.B.

      function klasse() {
        this.startList = function(wert) {
          // (...)
        }
      }

      objekt = new Klasse();
      objekt.startList("wert");

      Schöne Grüße
      Axel

      1. hi,

        diese Deklaration einer Funktion gibt es.

        Ja, stimmt - da war mein Blick auf den Beispielcode eindeutig ein zu oberflächlicher.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. hier mein js-skript, ich habe einfach die funktion dubliziert und die id geändert.
          leider funktioniert das skript  nicht, es wird nur die erste funkion ausgeführt.
          das skript wird als externe datei in das hmtl-dokument geladen, die ids sind vorhanden: <ul id="id1"> und <ul id="id2">. kann das problem leider nicht lokalisieren.

          startList = function(id1) {
           if (document.all&&document.getElementById) {
            navRoot = document.getElementById("id1");
            for (i=0; i<navRoot.childNodes.length; i++) {
             node = navRoot.childNodes[i];
             if (node.nodeName=="LI") {
              node.onmouseover=function() {
               this.className+=" over";
              }
              node.onmouseout=function() {
               this.className=this.className.replace(" over", "");
              }
             }
            }
           }

          }

          window.onload= function(){

          startList(id1);

          }

          startListu = function(id2) {
           if (document.all&&document.getElementById) {
            unavRoot = document.getElementById("id2");
            for (i=0; i<navRoot.childNodes.length; i++) {
             node = unavRoot.childNodes[i];
             if (node.nodeName=="LI") {
              node.onmouseover=function() {
               this.className+=" over";
              }
              node.onmouseout=function() {
               this.className=this.className.replace(" over", "");
              }
             }
            }
           }

          }

          window.onload= function(){

          startListu(id2);

          }

          1. Hallo,

            Vielleicht irre ich mich ja total, aber man kann doch nicht zwei Funktionen auf window.onload legen, oder ? Jedefalls nicht wie im Beispiel oben. Da überschreibst Du doch den Eintrag.

            Gehen würde am Ende :
            window.onload= function(){

            startList(id1);
                startListu(id2);

            }

            Schöne Grüße
            Axel

      2. diese Deklaration einer Funktion gibt es. Ist das nicht eine "anonyme" Funktion? Das gibts aber nur bei "Objektorientierten JS", wenn ich mich nich irre. Z.B.

        function klasse() {
          this.startList = function(wert) {
            // (...)
          }
        }

        objekt = new Klasse();
        objekt.startList("wert");

        Nein das geht immer. Du weißt einer Variabeln eine Funktionsreferenz zu und dereferenzierst sie in dem du die Klammer drumerhum setzt.

        var test = function(){ alert('test');};
        test();

        Struppi.

        1. Lieber Struppi,

          also ist folgende Schreibweise

          var test = function(){ alert('test');};

          die "Langform" im Gegensatz zu

          function fname() { alert('test'); }

          oder wie muss ich das verstehen?

          Liebe Grüße aus Ellwangen,

          Felix Riesterer.

          1. Hallo,

            die schreibweise mag vielleicht länger sein, aber der Vorteil ist ein anderer. Du kannst damit Deine Funktionen z.B. dynamisch aufbauen, wenn Du nicht den Vorteil der "Objektorientierung" nutzen willst.

            Z.B.
            if(Bedingung1) {
              var test = function(wert) { // Funktionalitäten 1 }
            }
            else {
              var test = function(wert) { // Funktionalitäten 2 }
            }

            test(wert)

            Hab zwar gerade kein Beispiel zur Hand, wann das Sinn macht, aber denkbar ist es.

            Schöne Grüße
            Axel

          2. also ist folgende Schreibweise

            var test = function(){ alert('test');};

            die "Langform" im Gegensatz zu

            function fname() { alert('test'); }

            oder wie muss ich das verstehen?

            Nicht ganz. Es ist die dynamische Form. Syntaktisch hat es die selbe Bedeutung, du weist der Variabeln test (bzw. fname) die Referenz auf die Funktion zu.
            Mit der 1. Variante kannst aber zur Laufzeit unterschiedliche Funktion bzw. Code verwenden.

            z.b. eben in Eventhandler.

            Ein Element z.b. ein DIV hat den Eventhanlder onclick, d.h. wenn ein Klick erfolgt wird die Funktion aufgerufen, die in onclick steht. Ungefähr so
            [DIVelement].click = function ()
            {
            if(typeof this.onclick == 'function') this.onclick();
            }
            Diese Funktion wird (intern) aufgerufen bei einem Klick.

            Und damit kannst du deine eigene Funktion bei einem Klick verwenden:

            [DIVelement].onclick = function() { alert(this.id);};

            Struppi.

        2. Hallo,

          Nein das geht immer.

          hehe. So eine Antwort hatte ich mir erhofft :-) War mir nicht mehr sicher, ob das grundsätzlich geht.

          Danke für die Aufklärung.

          Schöne Grüße
          Axel

  2. Hallo klickme,

    was genau geht nicht? Wie sieht die Fehlermeldung aus? Ist die ID im HTML überhaupt vorhanden?

    if (document.all&&document.getElementById) {

    warum prüfst du auf Methoden, die du nicht nutzt?

    wenn es dir um alle LIs in einem bestimmten UL geht, gib dem UL eine ID und greife auf die LIs mit document.getElementById("IDdesULs").document.getElementsByTagName[NummerdesLIs].... zu. Dann musst du auch nicht erst prüfen, ob der per childNodes gefundene Knoten auch wirklich ein LI ist.

    Gruß, Jürgen

    1. Hallo,

      »»» wenn es dir um alle LIs in einem bestimmten UL geht, gib dem UL eine ID und greife auf die LIs mit document.getElementById("IDdesULs").document.getElementsByTagName[NummerdesLIs]....
                                                                      ^
                                                                     ("li")

      Gruß, Jürgen

      1. Hallo Jürgen,

        document.getElementById("IDdesULs").document.getElementsByTagName[NummerdesLIs]....
                                                                         ^
                                                                       ("li")

        aha, du merkst es noch selbst. Sehr gut.  ;-)
        Außerdem ist da...

        document.getElementById("IDdesULs").document.getElementsByTagName("li")[NummerdesLIs]....

        ^^^^
        noch ein document zuviel.

        So long,

        Martin

        1. Hallo Der Martin,

          Außerdem ist da...

          document.getElementById("IDdesULs").document.getElementsByTagName("li")[NummerdesLIs]....
                                                   ^^^^
          noch ein document zuviel.

          danke. Ich sollte die Beispiele lieber kopieren und nicht aus dem Kopf abschreiben.

          Gruß, Jürgen

          1. ich möchte auf ids in verschiedenen ULs in einem html-dokument zugreifen.
            dachte ich müsste die funktion einfach nur anderes benennen und den inhalt in
            document.getElementById("") austauschen. also document.getElementById("id1") in der einen funktion und document.getElementById("id2") in der anderen. doch das funktionierte nicht, warum auch immer. vielleicht habe ich den funktionsaufruf falsch geschrieben.

  3. Hallo,

    was genau funktioniert denn nicht?
    Hast Du einmal geprüft, auf was für Objekte jeweils navRoot.childNodes[i] verweist. Möglicherweise handelt es sich nämlich nicht um das gewünschte LI-Element, sondern um Whitespace, also um einen Textknoten.
    Warum holst Du Dir die LI-Elemente nicht mit getElementsByTagName('LI')?

    Ciao,
    Andreas

  4. Hallo,

    was mache ich falsch???

    startList = function(wert) {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("wert");

    //^meinst Du hier wirklich den Sring "wert" oder nicht doch die Variable wert?
    navRoot = document.getElementById(wert);

    viele Grüße

    Axel