benji: nicht mit >this< ansprechbar - warum ?

SELF-Forum

nicht mit >this< ansprechbar - warum ?

benji
– Informationen zu den Bewertungsregeln

Hallo !

Also, mit diesem dummen, simplem Baby-Script habe ich mich gestern eine Ewigkeit rumgeschlagen, bis ich zu diesem Ergebnis gekommen bin, was ich einfach nur GRAUENVOLL finde. Hier also die Seitenausschnitte mit dem Ergebnis:

Der Script:
<sript>
 <!--
 function expand(num)
 {
  teil = eval(document.all["expand"+num].style);
  if(teil.display == "block") teil.display = "none";
  else if(teil.display == "none") teil.display = "block";
  else alert("nicht feststellbar !");
 }
 // -->
</script>

und dass, wo er wirken soll:
<ul>
 <li><a href="javascript:expand(1);">Blo</a>
     <p style="display:none" id="expand1">Blo ist das Gegenteil von Bli</p></li>
 <li><a href="javascript:expand(2);">Bli</a>
     <p style="display:none" id="expand2">Bli ist der Sonnengott</p></li>
 <li><a href="javascript:expand(3);">Ble</a>
     <p style="display:none" id="expand3">Ist ein Druckfehler und soll Bla heißen.
        <a href="irgendwas.htm">Hier kannst du mehr dazu lesen.</a></p></li>
 <li><a href="javascript:expand(4);">Bla</a>
     <p style="display:none" id="expand4">Bla = Ra, welcher auch der Sonnengott ist (neben Bli und Re)</p></li>
</ul>
[Text ist reiner Scherz ;-)]

Schön, wie man unschwer erkennen kann, wollte ich also die <p>-Tags dynamisch erscheinen lassen, und dann halt wieder weg (wie es in vielen Win-Hilfedateien [.chm] gemacht wird, das hier soll auch ein Ausschnitt sein, muss daher auch nur unter IE laufen ;-)

Gut, soweit kein Problem denke ich mir. Mein zu-"expandierender"-Tag soll nicht im Link sein, sondern dahinter, sodass er selbst auch links enthalten kann. Also, machen wir es mal nach dem DOM-Syntax:

Ausschnitt aus der Seite:
<li><a href="#" onclick="expand(this);">lesen</a><p style="display:none">Text</p></li>
(anmerkung: der <p> ist nur hier im beispiel mal mit inline-css gemacht, damit ich nicht noch ein CSS-Beispiel reinbringen muss. href="javascript:expand(this)" hat nicht geklappt, da er this nicht als schlüsselwort erkannt hat. Warum ?)

Ok, und hier mein SCript (ich rekonstruiere mal aus meinem Gedächtnis) :
function expand(elem)
{
 absatz = eval(elem.parentNode.lastChild); // sollte <p> ergeben, ergibt es aber nicht. Warum nicht ? Habe auch schon elem.parentNode.child[1] oder so was ausprobiert, nix geht.
 if(absatz.style.display == "none") absatz.style.display = "block";
 // usw.
}

So, dies hat sofern ich mich erinnern kann sogar funktioniert. Aber jetzt kommt das komische:

1. Seite geladen, alle Absätzte versteckt
 2. Link angeklickt, Absatz gezeigt (egal welcher Link/absatz)
 3. danach will man nochmal irgendeinen Link anklicken, aber es gibt eínen Laufzeit-
    fehler. Wieso ?

Also, wo liegt der Fehler - was läuft da schief beim zweiten aufruf der Funktion ?

benji

--
Those who know don't talk.
Those who talk don't know.
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. nicht mit >this< ansprechbar - warum ?

    Uschi Renziehausen
    – Informationen zu den Bewertungsregeln

    hallo benji,

    der kardinale Bock liegt in deinem JavaScript-Link. href="javascript:blabla(this)" verbiegt den Zugriff aufs Element. wenn mit a, dann so:
    <a href="" onclick="expand(this)">

    Oder aber ganz ohne a, sondern ein kleines SPAN:

    <html>
     <head>
      <title></title>
      <script language="JavaScript">
       function expand(elt) {
        var myP = elt.parentNode.lastChild;
        if(myP.style.display == "none") {
         myP.style.display = "block";
        } else {
          myP.style.display = "none";
        }
       }
      </script>
     </head>
     <body>
     <ul>
      <li><span onclick="expand(this);return false;">Blo</span>
          <p style="display:none" id="expand1">Blo ist das Gegenteil von Bli</p></li>
            </ul>
            </body></html>

    Gruß, Uschi

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. nicht mit >this< ansprechbar - warum ?

    Norbert Klein Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo.

    Schön, wie man unschwer erkennen kann, wollte ich also die <p>-Tags dynamisch erscheinen lassen, und dann halt wieder weg (wie es in vielen Win-Hilfedateien [.chm] gemacht wird, das hier soll auch ein Ausschnitt sein, muss daher auch nur unter IE laufen ;-)

    Ich habe mich jetzt auch mal dran verucht, und folgendes ist dabei raus gekommen:

    <script type="text/javascript">
    <!--
     function expand(li)
      {
       var ps = li.getElementsByTagName("p")[0].style;
       if(ps.display == "block"){ps.display = "none";}
       else{ps.display = "block";}
      }
    //-->
    </script>

    <ul>
    <li>
    <a href="javascript:;" onclick="expand(this.parentNode); return false;">AAA</a>
    <p style="display:none;">Text für AAA</p>
    </li>
    <li>
    <a href="javascript:;" onclick="expand(this.parentNode); return false;">BBB</a>
    <p style="display:none;">Text für BBB</p>
    </li>
    </ul>

    Warum this nicht funktioniert, wenn es im href steht, weiß ich nicht, allerdings gibt es keine Probleme, wenn es in onclick steht.
    Vorteil bei der Variante hier ist, dass du dir das Durchnummerieren sparen kannst.
    Mit this.parentNode wird das übergeordnete li-Element übergeben, und mit li.getElementsByTagName("p")[0] auf das erste darin vorkommende p-Element zugegriffen, der Rest ist Routine.

    Gruß
    Norbert

    --
    http://dhtml.tenorbert.de/
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln