display-eigenschaft verändern

[Fabian H]

also ich hab folgenden code:

<a href="javascript:document.getElementById('irgendwas').style.display='inline'">Klick!</a>

<div style="display: none;" id="irgendwas">
Versteckter text
</div> Und noch ein bisschen Text danach

Also was ich erreichen will: Der text wird nicht angezeigt (ohne platzhalter!) und ich will bei einem Klick den Text sichtbar machen.
Nur funktioniert es auf die oben beschriebene weisse nicht, bei einem Klick wird das ganze dokument mit dem wort 'inline' überschrieben.

thx for answers

 

[Adam Wille]

Warum auch nicht, du lässt schließlich eine JavaScript-Anweisung innerhalb des href-Attributes ausführen.

Dann musst du als Konsequenz dessen auch mit einem Rückgabewert der Anweisung rechnen, welcher in deinem Fall in dem Wert bestünde, welchen du der Eigenschaft display des Objektes zuordnest, welches du per document.getElementById('irgendwas') referenzierst.

Mit diesem erzeugten Rückgabewert hast du bei Ausführen der Anweisung in etwa dann zwischenzeitlich folgendes Szenario:

<a href="inline">Klick!</a>

Und was dann passiert ist ja klar, denn nachdem die JavaScript-Anweisung im String des href-Attributes ausgeführt wurde, wird nun auch noch das Klicken des Links verfolgt, mit standardmäßiger Änderung des Dokuments zum href-Attribut hin, es wird einfach das Dokument "inline" in's jeweilige Fenster geladen.

Willst du sowas nicht erzielen, dann musst du entweder dafür sorgen, dass nicht ein solcher Rückgabewert an die Engine gelangt, oder aber die JavaScript-Anweisungen dort plazieren, wohin sie eigentlich gehören: in einen EventHandler.

Ersteres erzielst du mithilfe des Operators void bzw. der Anweisung void().

<a href="javascript:void(document.getElementById('irgendwas').style.display='inline');">Klick!</a>

Hier wird nichts weiter gemacht, als dass kein Rückgabewert von der Anweisung innerhalb der Parenthesen erfolgt, sondern stattdessen das Schlüsselwort undefined an die Engine zurückgegeben wird.
Mit ebendiesem undefined als Wert für das href-Attribut erfolgt aber kein Seitenwechsel, das kannst du auch einfach selbst austesten:

<a href="javascript:undefined">Link</a>

Zweitere Variante klappte wie folgt:

<a href="egal" onClick="document.getElementById('irgendwas').style.display='inline'; return false;">Klick!</a>

Damit wird im Prinzip zuerst die JavaScript-Anweisung im Handler ausgeführt und danach durch return false das Standard-Laden des Dokumentes nach Klick auf Link, welches ja abhängig vom href-Attribut ist, unterbunden, indem der Event des Dokument-Ladens gecancelt wird.

Reichlich komplexe Geschichte auf den ersten Blick, schätze ich, aber wenn es einmal verstanden wurde, dann können damit eine Menge solcher Fehlerchen vermieden werden.

hth,
Geist

 

[Fabian H]

big thx

Aber so richtig funktionieren wollte nur die Methode mit dem onClick-Handler
wer weiss, ich mach da warscheinlich wieder was falsch

<edit>
Ok ich habs mir grad das dritte mal durchgelesen.
So langsam glaub ich kapier ichs
</edit>

 

[Adam Wille]

Was heißt "so richtig funktionierts nur mit ..." denn im genauen, kommt ne Fehlermeldung?

Beide Varianten sollten eigentlich klappen.

Geist

 

[Fabian H]

Bei mir hat die Methode mit dem void net geklappt, war aber bei genauerem Hinsehen nur ein Tippfehler!

 

[Fabian H]

jetzt kommts: das war auch das problem, das wir letzten hatte, wo bei einem Klick auf den Link sich das popup-fenster öffnete, aber der body bereich mit dem [object] überschrieben wurde ([object] ist der rückgabewert eines objektes, wenn nichts anderes angegben wird)

 

[Adam Wille]

Richtig, und jetzt rate mal, warum PopUps aus Links nur wie folgt geöffnet werden sollten:

<a href="seite.html" onClick="window.open(this.href, 'blubb'); return false;">Link</a>

und nicht, wie manch einer eben doch denkt:

<a href="javascript:window.open('bla', 'blubb');">Link</a>

Hier empfiehlt sich nämlich wiederum *keine* Verwendung der Variante mit void...

Geist

 

[VoyagerCenter]

Frage

Kann man bei

<a href="seite.html" onClick="window.open(this.href, 'blubb'); return false;">Link</a>

auch

<a href="javascript:void(0);" onClick="window.open(this.href, 'blubb'); return false;">Link</a>

schreiben? Oder soll man auch hier auf void verzichten?

 

[Fabian H]

Wieso überhaupt ein void?
Das return false; unterdrückt doch die Navigation zu der im href-Attribut angegebenen Seite!

Also am besten so:

<a href="" onClick="window.open(this.href, 'blubb'); return false;">Link</a>

 

[VoyagerCenter]

ABer

ABer ein void ist nich schlimm oder?