getElementById
Anton grünberg
- javascript
0 Mathias Brodala0 Klawischnigg1 Der Martin
0 MudGuard
1 Mathias Brodala0 Noreg
0 Inita0 Struppi
Hallo alle miteinander,
ich habe meinen heutigen Sonntagnachmitta damit verbracht zu ergründen WARUM folgender Code nicht funktioniert.
Vorab:
Ich würde gerne gewisse Bereiche einer Website ein- und ausblenden. Dazu hab ich folgenden Code beispielsweise erstellt
<html>
<body>
<div id="t1" style="{visibility:hidden;}">TEST TEST</div>
<input type="button" value="Es werde Licht" onClick="document.getElementById['t1'].style.visibility='visible';">
</body>
</html>
Dummerweise bekomme ich ständig "document.getElementById.t1.style ist Null oder kein Objekt.
Ich verstehs einfach nicht.
Bitte um Hilfe
LG,
Toni
Hallo Anton.
Ich würde gerne gewisse Bereiche einer Website ein- und ausblenden. Dazu hab ich folgenden Code beispielsweise erstellt
<html>
<body>
<div id="t1" style="{visibility:hidden;}">TEST TEST</div>
<input type="button" value="Es werde Licht" onClick="document.getElementById['t1'].style.visibility='visible';">
</body>
</html>
Die Syntax ist falsch, denn getElementById ist (Erbsenzähler bitte einmal wegschauen) eine Methode und kein Objekt. Eine Methode wird mit runden Klammern ausgeführt.
Dummerweise bekomme ich ständig "document.getElementById.t1.style ist Null oder kein Objekt.
Eben. Du hast eine mögliche Schreibweise angewandt, mit welcher man auf Objekte und Eigenschaften zugreifen kann. Die Schreibweise in dieser Fehlermeldung ist eine andere.
Einen schönen Sonntag noch.
Gruß, Mathias
Hi there,
Ich verstehs einfach nicht.
Bitte um Hilfe
runde Klammern bei getElementById wirken da Wunder;)
Hallo,
abgesehen von deinem entscheidenden Syntaxfehler, auf den dich die Kollegen schon hingewiesen haben, hätte ich auch noch ein paar Kleinigkeiten.
<div id="t1" style="{visibility:hidden;}">TEST TEST</div>
Erstens: Überlege dir, ob ein anderes Element als div nicht geeigneter wäre. Vielleicht ein <p>? Man sieht oft, dass div-Elemente verwendet werden, ohne dass der Schreiber über andere, möglicherweise sinnvollere Möglichkeiten nachgedacht hat. Das div ist ein aussagefreies Blockelement, eigentlich zum Gruppieren anderer Elemente gedacht.
Zweitens: Vermeide inline-Styles (style-Attribute). Der Übersichtlichkeit und Wartungsfreundlichkeit des Codes ist gedient, wenn du alle CSS-Angaben zentral zusammenfasst - entweder in einem style-Abschnitt im head, oder sogar als externe CSS-Ressource.
Drittens: Die Angabe style="{visibility:hidden;}" als HTML-Attribut ist Mumpitz. Die geschweiften Klammern haben hier nichts verloren, das style-Attribut enthält nur die reinen CSS-Rulesets. Also das, was im zentralen CSS *innerhalb* der geschweiften Klammern steht.
Ciao,
Martin
Hi,
Drittens: Die Angabe style="{visibility:hidden;}" als HTML-Attribut ist Mumpitz.
Nö, nicht Mumpitz. Zukunft. CSS 3. Siehe http://www.w3.org/TR/css-style-attr
cu,
Andreas
Hallo MudGuard.
Drittens: Die Angabe style="{visibility:hidden;}" als HTML-Attribut ist Mumpitz.
Nö, nicht Mumpitz. Zukunft. CSS 3. Siehe http://www.w3.org/TR/css-style-attr
Wobei es mir angesichts der Entwicklungen bzgl. Trennung von Struktur und Design allgemein und XHTML 2.0 im Speziellen sinnfrei erscheint, das style-Attribut zu einem Container ganzer Stylesheets zu machen.
Einen schönen Sonntag noch.
Gruß, Mathias
Hi!
Zukunft. CSS 3. Siehe http://www.w3.org/TR/css-style-attr
Macht es denn Sinn so etwas zu entwickeln? Sollte das style-Attribut in zukünftigen XHTML-Versionen nicht komplett entfallen?
(kann sein, dass ich da was falsch verstanden hatte, ich selbst verfolge die Entwicklung eigentlich nicht)
Wäre das nicht ein logischer Schritt hin zur strikten Trennung von Struktur und Layout?
Gruß
Noreg
hoi,
kannst du mit meinem code etwas spielen, vielleicht kommst du mal klar
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function anzeigen(das){
if(document.getElementById(das).style.display=='none')
document.getElementById(das).style.display='block';
else
document.getElementById(das).style.display='none';
}
function schließen(){
document.getElementById("eins").style.display='none';
document.getElementById("zwei").style.display='none';
}
</script>
</head>
<body>
» <a href="javascript:anzeigen('eins');">Text Eins anzeigen</a>
<div style="display: none;" id="eins">
Viel Text viel text viel text ...
</div>
<br>
» <a href="javascript:anzeigen('zwei');">Text Zwei anzeigen</a>
<div style="display: none;" id="zwei">
Viel Text viel text viel text ...
<a href="javascript:schließen(); anzeigen('eins');">Close</a>
<div style="display: none;" id="eins">
Viel Text viel text viel text ...
</div>
</div>
</body>
</html>
ich habe meinen heutigen Sonntagnachmitta damit verbracht zu ergründen WARUM folgender Code nicht funktioniert.
Du scheinst zuviel Zeit zu haben du Glücklicher. dir hätte ja ein kurzer Blick in Selfhtml genügt.
also du hast eine JS funktion wo etwas nicht stimmt:
http://de.selfhtml.org/javascript/index.htm
Kein Objekt?
http://de.selfhtml.org/javascript/objekte/index.htm
document
document.getElementById()
Kann man in 10 Minuten finden. Wenn man weiß wo man suchen muss.
Struppi.