Übergabewert für document.getElementById
André
- javascript
0 Kai3450 Karl Komma0 Karl Komma0 Kai345
0 André
0 lsfr770 André
Hallo Freunde der Internetseitengestaltung!
Ich habe eine kleine Funktion, die leider nicht das tut, was sie soll. Ich übergebe per Button-Klick einen Wert und durch die Funktion "loesung ()" soll dann die Antwort sichtbar werden.
Anscheinend funktioniert das mit der Übergabe nicht so wie es soll?! Kann mir jemand einen Tipp geben, wo mein Denkfehler liegt? Beispiel siehe unten.
Vielen Dank und liebe Grüße,
André
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Fragestunde</title>
<script type="text/javascript">
function loesung (Antwort) {
if (document.getElementById)
document.getElementById("Antwort").style.visibility = "visible";
}
</script>
</head>
<body>
<form>
<p>Frage1?</p>
<input type="button" name="a1" id="w1" value="Antwort" onclick="javascript:loesung(Antw1)">
<span id="Antw1" style="visibility:hidden">Antwort1</span>
<hr>
<p>Frage2?</p>
<input type="button" name="a2" id="w2" value="Antwort" onclick="javascript:loesung(Antw2)">
<span id="Antw2" style="visibility:hidden">Antwort2</span>
<hr>
</form>
</body>
</html>
[latex]Mae govannen![/latex]
Anscheinend funktioniert das mit der Übergabe nicht so wie es soll?! Kann mir jemand einen Tipp geben, wo mein Denkfehler liegt?
Du möchtest den Wert des Funktions-Parameters Antwort übergeben, aber du übergibst stattdessen die feste Zeichenkette "Antwort". Da dieses Element nicht existiert ...
function loesung (Antwort) {
if (document.getElementById)
document.getElementById("Antwort").style.visibility = "visible";
}
Ansonsten ist das javascript: - Label in event-bezogenen Attributen sinnfrei.
Stur lächeln und winken, Männer!
Kai
--
It all began when I went on a tour, hoping to find some furniture
Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
[SelfHTML-Forum-Stylesheet](http://selfhtml.knrs.de/#h_stylesheet)
Du möchtest den Wert des Funktions-Parameters Antwort übergeben, aber du übergibst stattdessen die feste Zeichenkette "Antwort". Da dieses Element nicht existiert ...
function loesung (Antwort) {
if (document.getElementById)
document.getElementById("Antwort").style.visibility = "visible";
}
Darüber hinaus übergibt er in
<input type="button" name="a1" id="w1" value="Antwort" onclick="javascript:loesung(Antw1)">
der Funktion loesung() den Inhalt einer Variablen Antw1. Die exisitiert im gegebenen Code erstens nicht und zweitens meint er sicher eh den Bezeichner, also den Text "Antw1".
name="a1" id="w1"
Das halte ich im Übrigen für unklug. Es spricht in aller Regel nichts dagegen, den gleichen Bezeichner für name und id zu verwenden, und vor allem beugt es späterer Verwirrung vor, wenn das Kind nur einen Namen hat, statt zwei.
[latex]Mae govannen![/latex]
name="a1" id="w1"
Das halte ich im Übrigen für unklug. Es spricht in aller Regel nichts dagegen, den gleichen Bezeichner für name und id zu verwenden, und vor allem beugt es späterer Verwirrung vor, wenn das Kind nur einen Namen hat, statt zwei.
Eigentlich reicht ein „name“-Attribut aus. Die Referenzen kann man über document.forms erhalten; bei Verwendung eines label-Elements setzt man das Formularelement als Kindelement ein; per CSS kann man mit [name=] arbeiten. Somit ist das id-Attribut fast immer entbehrlich.
IE6 wäre die einzige Ausnahme, die mir einfiele, aber wer will den - ohne die Überzeugungskraft einer .44er Magnum an der Schläfe zu spüren - noch unterstützen?
Stur lächeln und winken, Männer!
Kai
@@Kai345:
nuqneH
bei Verwendung eines label-Elements setzt man das Formularelement als Kindelement ein
Es gibt gute Gründe, das nicht zu tun.
Somit ist das id-Attribut fast immer entbehrlich.
Au contraire, mon capitaine! Das @for-Attribut eines label bezieht sich auf die ID eines input-Elements. Und da so ziemlich alle Eingabefelder ein Label haben …
Was entbehrlich ist: input-Elemente für Nicht-Eingabefelder zu missbrauchen. Ein Button ist kein Eingabefeld, input ist dafür fehl am Platze. Für Buttons gibt es ein passendes Element: button.
Qapla'
[latex]Mae govannen![/latex]
bei Verwendung eines label-Elements setzt man das Formularelement als Kindelement ein
Wie erreicht man per CSS, daß bei :hover eines labels das passende Element mit hervorgehoben wird (beispielsweise über einen glow-Effekt per box-shadow)? Als Kindelement kein Problem. (Beispiel)
Somit ist das id-Attribut fast immer entbehrlich.
Au contraire, mon capitaine! Das @for-Attribut eines label bezieht sich auf die ID eines input-Elements. Und da so ziemlich alle Eingabefelder ein Label haben …
… sollten :( Die Praxis sieht größtenteils anders aus. Gut, man könnte solchen Leuten einen schwarzen Kleinbus schicken…
Stur lächeln und winken, Männer!
Kai
Hallo Kai und alle anderen!
Du möchtest den Wert des Funktions-Parameters Antwort übergeben, aber du übergibst stattdessen die feste Zeichenkette "Antwort". Da dieses Element nicht existiert ...
Gibt es denn eine andere Möglichkeit, wie ich aus
<input type="button" name="a1" id="a1" value="Antwort" onclick="javascript:loesung(Antw1)">
einen Wert übergeben kann, der in der Funktion
function loesung (Antwort) {
if (document.getElementById)
document.getElementById("Antwort").style.visibility = "visible";
}
dafür sorgt, dass die Antwort1
<span id="Antw1" style="visibility:hidden">Antwort1</span>
auf visible gesetzt wird? Geht das prinzipiell so zu lösen?
Vielen Dank,
André
Hier nochmal das Wichtigste, das in den Antwortposts meiner Vorgänger gesagt wurde, zusammengefasst:
1. document.getElementById(Antwort) - keine Anführungszeichen, du suchst ja schließlich nicht nach dem Element mit der Id "Antwort", sondern willst, dass das Funktionsargument übergeben wird.
2. Da du ohnehin nur document.getElementById() benutzt, kannst du die name-Attribute getrost weglassen.
3. Bei Event-Handler-Attributen ist kein "javascript:" nötig. (Außerdem ist es allgemein besserer Stil, kein "javascript:" zu verwenden.)
4. Das jeweilige Argument, das du den Funktionen innerhalb der onclick-Attribute übergibst, muss in (einfachen) Anführungszeichen stehen (hier verhält es sich genau umgekehrt wie bei 1.).
Somit lautet der korrigierte Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Fragestunde</title>
<script type="text/javascript">
function loesung (Antwort) {
if (document.getElementById)
document.getElementById(Antwort).style.visibility = "visible";
}
</script>
</head>
<body>
<form>
<p>Frage1?</p>
<input type="button" id="w1" value="Antwort" onclick="loesung('Antw1')">
<span id="Antw1" style="visibility:hidden">Antwort1</span>
<hr>
<p>Frage2?</p>
<input type="button" id="w2" value="Antwort" onclick="loesung('Antw2')">
<span id="Antw2" style="visibility:hidden">Antwort2</span>
<hr>
</form>
</body>
</html>
LG LSFR77
Hallo LSFR77 und alle anderen Antwortenden!
Hier nochmal das Wichtigste, das in den Antwortposts meiner Vorgänger gesagt wurde, zusammengefasst:
Vielen, vielen Dank! Nun funktioniert es so, wie ich es gern haben wollte. =))
Viele Grüße,
André