André: Übergabewert für document.getElementById

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>
  1. [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)
    
    1. 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".
      
      1. 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.

        1. [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

          --
          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
          1. @@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'

            --
            Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
            1. [latex]Mae  govannen![/latex]

              bei Verwendung eines label-Elements setzt man das Formularelement als Kindelement ein

              Es gibt gute Gründe, das nicht zu tun.

              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

              --
              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
    2. 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é

  2. 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

    1. 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é