[JS] Seltsames Phänomen

[Flare]

Hey ho!

Ich habe hier folgenden JS-Code (über PHP ausgegeben):

Code:

echo "<script language="JavaScript" type="text/javascript">
function showWMTT(id, time) {
   if (time==0) {
      if (wmtt != null) {
         hideWMTT(0);
      }
      wmtt = document.getElementById(id);
      wmtt.style.display = \"block\";
   }else{
      id2 = id; // um diese Zeile geht es
      showtimeout = window.setTimeout(\"showWMTT(id2, 0)\", time);
   }
}
</script>";

Ich muss die Zeile vor dem .setTimeout hinsetzen, da mir sonst mein Browser (FireFox 2) sagt, dass id nicht definiert ist.
Ich habe mir aber id direkt vor und nach dem Timeout per alert ausgeben lassen, es steht das richtige drin.
Wieso klappt es nicht so, wie es logisch wäre?


Flare

[Assertor]

Hallo Flare,

hast Du mal den "fehlerhaften" Quelltext im Browser dir anzeigen lassen bzw. den DOM-Inspector genutzt, den Wert zu überprüfen?

Ich glaube, daß Problem liegt in Deinem Aufruf von

Delphi-Quellcode:

showtimeout = window.setTimeout(\"showWMTT(id2, 0)\", time);

Ich weiß zwar nicht was showtimeout ist (Glaskugel kaputt), aber Du solltest die Encapuslated Strings prüfen.

z.B.

Delphi-Quellcode:

showtimeout = 'window.setTimeout(\"showWMTT('+id2+', 0\", time);';

Gerade gesehen: Hier muß natürlich id stehen...

Alles klar?

Gruß winkel79

[OregonGhost]

id ist ein Parameter für die Funktion showWMTT() und ist somit innerhalb dieser Funktion lokal. Wie (plöder roter Kasten) winkel79 bereits schreibt, definierst du als Handler für deinen Timeout Javascript-Code, der als String übergeben wird. Wenn du dort id angibst, steht dort explizit id, aber id ist nicht innerhalb dieses Codes definiert. Wenn du hingegen eine zusätzliche Variable id2 einführst, ist diese in Javascript global und auch dein Handler-Code kann auf diese zugreifen. Das, was du willst, ist vermutlich in der Tat winkel79s Lösung, aber ich hoffe, ich konnte noch etwas dazu erklären :)

Edit:
Ich habe meine Zweifel, dass der komplette Aufruf von setTimeout gekapselt gehört, sondern gehe von folgendem als Lösung aus:

Code:

showtimeout = window.setTimeout(\"showWMTT(\" + id + \", 0)\", time);

Allerdings dürftest du schon in Zeile 1 auf Probleme stoßen, oder?

Code:

<script language="JavaScript" type="text/javascript">

Das in einem PHP-String, den du nicht mit Hochkommata einleitest, müsste eigentlich zu einem Fehler bei der Ausgabe führen. In deinem Fall kannst du den PHP-String vielleicht eher mit Hochkommata kapseln und sparst dir dann auch die Escapes bei der setTimeout-Geschichte.

[Assertor]

Hi OregonGhost!

Wir haben ja beide Recht ;)

Es kommt halt drauf an, was showtimeout ist. Wenn es ein String ist muß er vollständig gekapselt werden. Ist es ein Funktionsaufruf, dann nur der entsprechende Teil.

Wobei: Wenn es ein Funktionsaufruf wäre, verstehe ich Flares Kapselung nicht - die ergibt dort dann keinen Sinn

Delphi-Quellcode:

window.setTimeout(\"showWMTT(id2, 0)\", time);

Das müßte dann auch mit einfachen oder doppelten Anführungszeichen ohne Backslash gehen: z.B.

Delphi-Quellcode:

window.setTimeout("showWMTT("+id2+", 0)", time);

Gruß winkel79

[Flare]

Okay, ihr scheint mich nicht ganz verstanden zu haben, hoer nochmal der komplette Javascript-Code, der auch genau so klappt wie er klappen soll, nur stört mich Zeile 27. Aber wenn ich es so mache, wie es jeder Programmieren würde, klappt es nicht.

Es ist eine Funktionssammlung für Tooltips.

showtimeout und hidetimeout sind die Handles (wenn man das so nennen kann) von den 2 Timern zum zeigen und verschwinden des Tooltips.

Code:

<script language="JavaScript" type="text/javascript">
   wmtt = null;
   x = 0;
   y = 0;
   
   document.onmousemove = updateWMTT;
   
   function updateWMTT(e) {
      x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
      y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
      if (wmtt != null) {
         wmtt.style.left = (x + 20) + "px";
         wmtt.style.top = (y + 20) + "px";
      }
   }
   
   function showWMTT(id, time) {
      if (time==0) {
         if (wmtt != null) {
            hideWMTT(0);
         }
         wmtt = document.getElementById(id);
         wmtt.style.display = "block";
         wmtt.style.left = (x + 20) + "px";
         wmtt.style.top = (y + 20) + "px";
      }else{
         id2 = id; // warum muss ich id an einer anderen Variable zuweisen bevor ich sie benutzen kann?
         showtimeout = window.setTimeout("showWMTT(id2, 0)", time); // hier steht id2 statt id
      }
   }
   
   function hideWMTT(time) {
      if (showtimeout) {
         window.clearTimeout(showtimeout);
      }
      if (time==0) {
         wmtt.style.display = "none";
         window.clearTimeout(hidetimeout);
      }else{
         hidetimeout = window.setTimeout("hideWMTT(0)", time);
      }
   }
</script>
<div class="tooltip" id="tip1">Und hier steht er</div><div onMouseOver="showWMTT('tip1', 500)" onMouseOut="hideWMTT(500)" style="display: inline;">Hier gibt es einen Tooltip</div>

Das hier klappt nicht, und ich weiß nicht warum

Code:

showtimeout = window.setTimeout("showWMTT(id, 0)", time);

Falls ihr noch Erklärungen zu allen einzelnen Variablen braucht, meldet euch :stupid:


Flare

[Assertor]

Hi Flare,

poste doch mal bitte eine einzelne HTML Datei (nicht als Text, sondern als Anhang), damit ich mir das mal kurz ansehen kann.

Übrigens: Verstanden hatte ich das schon. Die Erklärung von OregonGhost war doch klasse. Die Variable ist nicht -global- initialisiert. In Deinem Aufruf steht dann ...id...

Woher soll jetzt der JavaScript Interpreter des Browsers wissen, was id ist? Er übergibt NICHT den Inhalt von id, sondern "id" selbst. Durch Dein id2 = id löst Du dieses Problem...

Aber mehr nach deinem Post.

Gruß winkel79

[Flare]

Hier mal ein Link zu einer eben erstellten Seite wo man einen Tooltip mit dem Code oben findet.

Ich glaube ich habe jetzt verstanden, was ihr mir versucht habt zu erklären. Mein per String übergebener Funktionsaufruf wird von einer völlig anderen Funktion verarbeitet als showWMTT und deshalb kennt der Interpreter id nicht.
Aber wieso kennt er dann id2? Müsste nicht id2 auch nur lokal in showWMTT bekannt sein oder sind alle Variablen die ich nur so anlege global?

Danke für eine Antworten! :firejump:


Flare

[Assertor]

Hallo Flare!

Ja, die Variable definierst Du auf Deine Art global.

Lokal wäre

Delphi-Quellcode:

var id2 = id;

Link hierzu:
SELFHTML JavaScript Variablen Referenz

Gruß winkel79

[Flare]

Zitat:

Zitat von winkel79

Ja, die Variable definierst Du auf Deine Art global.

Lokal wäre

Delphi-Quellcode:

var id2 = id;

:shock: Gut zu wissen. Ich dachte bis jetzt immer das var dient zur Übersichtlichkeit und ist optional.
Dann liegt dieses var eben den Scope fest, auch ok :lol:
Merke ich mir und großes Danke an euch!


Flare

[Assertor]

Nachtrag:

Gerade mal getestet: Die Lösung für Dein Problem ist:

Delphi-Quellcode:

showtimeout = window.setTimeout("showWMTT(\'"+id+"\', 0)", time);

Dann klappt es. Hab mich vor zwei Jahren mit der kompletten Erstellung eines JavaScript Shops rumgeschlagen, das hat fast 4 Monate gedauert. Da kennt mal alle Ecken von JS/ECMA Script ;)

Gruß winkel79