.style.display

[Newbie]

Morgen,

ich hab ein Bild #MyImage, dass ich irgendwann nicht mehr anzeigen möchte.

document.getElementById('MyImage').style.display = "none"; hab ich ausprobiert, da wird mir lediglich als Fehlermeldung

document.getElementById("MyImage") is null
[Break on this error] document.getElementById('MyImage').style.display = "none";

angezeigt. Warum - und wie kann ich das ganze beheben?

[Don P]

Hallo,

Es wird

document.getElementById("MyImage") is null
angezeigt. Warum

Weil ein Element mit der id "MyImage" nicht existiert. Es sollte ein Objekt sein, ist aber null.

und wie kann ich das ganze beheben?

Die richtige id angeben oder:

document.getElementById("MyImage") && myImage.style.display = "none";

Gruß, Don P

[Don P]

Hallo,

Ich meinte natürlich:
document.getElementById("MyImage") && document.getElementById("MyImage").style.display = "none";

Gruß, Don P

[Newbie]

document.getElementById("MyImage") && myImage.style.display = "none";

Naja, ich hab ja ein div#MyImage, dessen Hintergrundbild ich so gebastelt hatte:

background-image:url(images/background.jpg);

Ich hab neben meiner alten Variante auch schon versucht die Anzeigegröße auf 0 zu setzen:

document.getElementById('MyImage').style.width = 0;
            document.getElementById('MyImage').style.height = 0;

geht auch nicht.

Und bei deinem Code kommt nur:

invalid assignment left-hand side
[Break on this error] document.getElementById("MyImage").style.display = "none";\n

[Don P]

Hallo,

Naja, ich hab ja ein div#MyImage, dessen Hintergrundbild ich so gebastelt hatte:

div#MyImage ist CSS-Syntax und funktioniert für ein <img id="MyImage">, genau wie document.getElementById("MyImage">), aber ein <img id="MyImage"> existiert _im HTML_ anscheinend nicht.

document.getElementById('MyImage').style.width = 0;
            document.getElementById('MyImage').style.height = 0;

geht auch nicht.

Wie gesagt: weil es nicht existiert.

Und bei deinem Code kommt nur:

invalid assignment left-hand side

Hatte es nicht getestet, sorry. Es müsste so heißen:
document.getElementById("MyImage") && (myImage.style.display = "none");

oder besser so:
if(document.getElementById("MyImage")) myImage.style.display = "none";

Aber das verhindert nur die Fehlermeldung. Der logische Fehler bleibt bestehen, weil kein Bild mit id="MyImage" im HTML existiert.

Gruß, Don P

[Peter Pan]

Hi!

Aber das verhindert nur die Fehlermeldung. Der logische Fehler bleibt bestehen, weil kein Bild mit id="MyImage" im HTML existiert.

Bzw. zum entsprechenden Zeitpunkt (noch) nicht im DOM - siehe Patricks Hinweis.

off:PP

[Sven Rautenberg]

Moin!

div#MyImage ist CSS-Syntax und funktioniert für ein <img id="MyImage">

Definitiv NICHT!

genau wie document.getElementById("MyImage">), aber ein <img id="MyImage"> existiert _im HTML_ anscheinend nicht.

Weiß nicht, wieso du auf <img/> kommst.

document.getElementById('MyImage').style.width = 0;
            document.getElementById('MyImage').style.height = 0;

geht auch nicht.

Wie gesagt: weil es nicht existiert.

Und bei deinem Code kommt nur:

invalid assignment left-hand side

Hatte es nicht getestet, sorry. Es müsste so heißen:
document.getElementById("MyImage") && (myImage.style.display = "none");

Erklärst du mal, was für eine unleserliche Abkürzung du dort verwendest? Wo definierst du myImage?

oder besser so:
if(document.getElementById("MyImage")) myImage.style.display = "none";

Auch das ist nicht viel besser. Den Short-Circuit-Eval der oberen Zeile mal unbeachtet sollte man Codeblöcke immer in Klammern setzen, auch wenn die Syntax das nicht zwingend fordert. Und auch hier die Frage: Wo definierst du das Objekt myImage?

Aber das verhindert nur die Fehlermeldung. Der logische Fehler bleibt bestehen, weil kein Bild mit id="MyImage" im HTML existiert.

Ich sehe in deinem Code mindestens Klarheitsfehler...

- Sven Rautenberg

[Don P]

Hallo,

Weiß nicht, wieso du auf <img/> kommst.

Achso klar, es geht ja um ein DIV, nicht im IMG... ist heute wohl nicht mein Tag... lauter Flüchtigkeitsfehler.

Hatte es nicht getestet, sorry. Es müsste so heißen:
document.getElementById("MyImage") && (myImage.style.display = "none");

Erklärst du mal, was für eine unleserliche Abkürzung du dort verwendest?

Du meinst &&? Das weißt du doch, oder? Es ist der gewöhnliche UND-Operator, hier als Guardoperator benutzt: Wenn der Ausdruck links davon false wird (also das Objekt nicht definiert ist), dann geschieht auch nichts weiter (=>keine Fehlermeldung), andernfalls wird auch der rechte Ausdruck ausgewertet, wobei der Zuweisungsoperator = den zugewiesenen Wert zurückgibt (der allerdings nicht weiter gebraucht wird).
Bad practice, quick and dirty... ich weiß, wollte den Noob aber nicht noch mit Variablendeklarationen, if-Abfragen und Klammern verwirren, zumal das hier ja eh nur ein Rumdoktern an Symptomen ist.

Wo definierst du myImage?

Flüchtigkeitsfehler, sorry... Wollte es vorher noch definieren, habe mich aber dann für den Einzeiler entschieden und übersehen, dass die Variable dann undefiniert dasteht :(

oder besser so:
if(document.getElementById("MyImage")) myImage.style.display = "none";

Auch das ist nicht viel besser. Den Short-Circuit-Eval der oberen Zeile mal unbeachtet sollte man Codeblöcke immer in Klammern setzen, auch wenn die Syntax das nicht zwingend fordert.

Eval? Bist du sicher? Eine Zuweisung ist doch eine Operation wie jede andere und liefert einen Wert zurück (den zugewiesenen). Meistens steht sowas als einzelne Anweisung da, mit Semikolon abgeschlossen, aber das ist meines Wissens kein muss.

Ich sehe in deinem Code mindestens Klarheitsfehler...

Wie gesagt: Ich wollte hier keinen Klarheitswettbewerb gewinnen, nur schnell die Fehlermeldung wegzaubern und darauf warten, dass es heißt: "funktioniert aber immer nocht nicht mit dem Ausblenden" ;)

Gruß, Don P

[Sven Rautenberg]

Moin!

Hatte es nicht getestet, sorry. Es müsste so heißen:
document.getElementById("MyImage") && (myImage.style.display = "none");

Erklärst du mal, was für eine unleserliche Abkürzung du dort verwendest?

Du meinst &&?

Nein, myImage.

Auch das ist nicht viel besser. Den Short-Circuit-Eval der oberen Zeile mal unbeachtet sollte man Codeblöcke immer in Klammern setzen, auch wenn die Syntax das nicht zwingend fordert.

Eval? Bist du sicher? Eine Zuweisung ist doch eine Operation wie jede andere und liefert einen Wert zurück (den zugewiesenen). Meistens steht sowas als einzelne Anweisung da, mit Semikolon abgeschlossen, aber das ist meines Wissens kein muss.

Ich sprach nicht von der Funktion eval(), sondern von Short-Circuit-Evaluation.

Ich sehe in deinem Code mindestens Klarheitsfehler...

Wie gesagt: Ich wollte hier keinen Klarheitswettbewerb gewinnen, nur schnell die Fehlermeldung wegzaubern und darauf warten, dass es heißt: "funktioniert aber immer nocht nicht mit dem Ausblenden" ;)

Ich war irritiert ob deiner Verwendung von myImage. Irgendwie schienst du sehr überzeugt davon auszugehen, dass ein Aufruf von getElementById("MyImage") gleichzeitig ein Objekt myImage generiert, was man verwenden kann.

Und wenn ich mir den IE so anschaue, dann wäre ich nicht mal sicher, ob dein Code nicht sogar funktionieren würde - mit Ausnahme der Tatsache, dass du dann ein Case-Problem der Bezeichner hättest (My <-> my).

- Sven Rautenberg

[Don P]

Hallo,

Den Short-Circuit-Eval der oberen Zeile mal unbeachtet

Aha – was ich da mit dem &&-Operator erklärt habe nennt man also "Short Circuit Eval" bzw. "Kurschlussauswertung", der Begriff war mir neu. Dachte zuerst, das hätte etwas mit eval() zu tun, aber so ist es ja nicht.

Wieder was gelernt :)

So eine Kurzschlussauswertung ist ja nicht grundsätzlich schlecht. Ich benutze sie öfer mal, wenn auch nicht unbedingt mit Zuweisung im selben Ausdruck.

Gruß, Don P

[Martin23]

sieht so aus als gäbe es kein Element "MyImage". Poste mal dein html

Morgen,

ich hab ein Bild #MyImage, dass ich irgendwann nicht mehr anzeigen möchte.

document.getElementById('MyImage').style.display = "none"; hab ich ausprobiert, da wird mir lediglich als Fehlermeldung

document.getElementById("MyImage") is null
[Break on this error] document.getElementById('MyImage').style.display = "none";

angezeigt. Warum - und wie kann ich das ganze beheben?

[Patrick Andrieu (noreg)]

document.getElementById('MyImage').style.display = "none"; hab ich ausprobiert, da wird mir lediglich als Fehlermeldung

document.getElementById("MyImage") is null

Zu dem Zeitpunkt wo das Script eingelesen und ausgeführt wird, existiert das entsprechende Element noch nicht.

Stichwort: window.onload() dürfte Dich weiterbringen.

P.

[Peter Pan]

Hi!

Zu dem Zeitpunkt wo das Script eingelesen und ausgeführt wird, existiert das entsprechende Element noch nicht.

Stichwort: window.onload() dürfte Dich weiterbringen.

Bzw: onDomReady.

off:PP

[Gunnar Bittersmann]

@@Peter Pan:

nuqneH

Stichwort: window.onload() dürfte Dich weiterbringen.

Bzw: onDomReady.

Bzw.: Script am Ende des body einbinden. Das DOM ist dann ready, eines Eventhandlers bedarf es nicht. Außerdem wird das Rendering der Seite nicht unnütz verzögert. [PERFORMANCE-BP2]

Qapla'

[Peter Pan]

Hi!

Stichwort: window.onload() dürfte Dich weiterbringen.

Bzw: onDomReady.

Bzw.: Script am Ende des body einbinden. Das DOM ist dann ready, eines Eventhandlers bedarf es nicht. Außerdem wird das Rendering der Seite nicht unnütz verzögert. [PERFORMANCE-BP2]

Ja kenne ich, danke! Das hast Du hier schon mindestens einmal hier gepostet;) Ist wirklich lesenswert, genau wie Website Performance Best Practice – Teil 1.

off:PP

[Pragma]

Bzw.: Script am Ende des body einbinden. Das DOM ist dann ready, eines Eventhandlers bedarf es nicht. Außerdem wird das Rendering der Seite nicht unnütz verzögert.

Stimmt alles, bedarf aber der Einschränkung: Geht nur, wenn du nicht vorher schon JS Schweinereien machen willst, die die einzubindende Ressource benötigen.