Onkel Schnitzel: Formularfeld einblenden

Hallo,

ich hab mich entschlossen, für meine Spielerstatistik erstmals auch JavaScript zum Einsatz zu bringen. Und zwar soll, wenn ich im Formular ankreuze, daß ein Spieler eingewechselt, ausgewechselt oder eine Rote Karte bekommen hat, ein Feld eingeblendet werden, wo ich reinschreiben kann, wie lange der Spieler gespielt hat.

Nun habe ich mich bisher noch nie mit JavaScript beschäftigt. Mit Hilfe von SelfHTML und des Forums-Archivs habe ich mir mal was zusammengebastelt, doch leider funktioniert das nicht. In der Konsole steht die Fehlermeldung: "Fehler: document.formular.spielzeit_neu has no properties". Ich stelle mal den relevanten Teil des Quellcodes (das PHP-Script ist wohl unnötig) hier rein. Es wäre nett, wenn ihr mir helfen könntet.

Beste Grüße,
Onkel Schnitzel

<form name="formular" action="sp_stat_update2.php" method="post">
     <table class="tabelle" border="0" cellspacing="5" width="90%">
       <tr>
         <th>Spieler</th>
         <th>Gespielt</th>
         <th>Eingew.</th>
         <th>Spielzeit</th>
       </tr>
      <script type="text/javascript">
      <!--
      function Einblenden() {
         document.formular.spielzeit_neu[4].style.display = 'block';
      }
      //-->
      </script>
       <tr>
         <td>Gökhan Aydin</td>
        <td><input type="checkbox" name="spiele_neu[4]" value="1" /></td>
         <td><input type="checkbox" name="ein_neu[4]" value="1" onClick="Einblenden()" /></td>
         <td><input type="text" name="spielzeit_neu[4]" size="2" style="display: none;" /></td>

  1. Hi there,

    (das PHP-Script ist wohl unnötig) hier rein. Es wäre nett, wenn ihr mir helfen könntet.

    Gib dem, was Du darstellen oder nicht darstellen möchtest eine ID; zB: <input type="text" name="spielzeit_neu[4]" ID="SN4" oder was auch immer, dann kannst Du mit document.getElementByID("SN4").style etc... Deine Geschichte verwirklichen...

    1. Gib dem, was Du darstellen oder nicht darstellen möchtest eine ID; zB: <input type="text" name="spielzeit_neu[4]" ID="SN4" oder was auch immer, dann kannst Du mit document.getElementByID("SN4").style etc... Deine Geschichte verwirklichen...

      Jetzt bekomme ich die Fehlermeldung "Fehler: document.getElementByID is not a function". Wenn ich die Klammern durch eckige Klammern ersetze, kommt wieder die Meldung "... has no properties".

      Gruß,
      Onkel Schnitzel

      1. Hi,

        Jetzt bekomme ich die Fehlermeldung "Fehler: document.getElementByID is not a function".

        die gibt's ja auch nicht, sondern nur eine (für den Menschen!) sehr ähnlich aussehende. Dir ist übrigens bewusst, dass das <script>-Element nicht an der Stelle stehen darf, an der Du es untergebracht hast?

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hi there,

          Dir ist übrigens bewusst, dass das <script>-Element nicht an der Stelle stehen darf, an der Du es untergebracht hast?

          Ich zitiere wieder einmal selfhtml 8.1: "Es gibt keine festen Vorschriften dafür, an welcher Stelle einer HTML-Datei ein JavaScript-Bereich definiert werden muss" ...

          1. Hallo,

            Ich zitiere wieder einmal selfhtml 8.1: "Es gibt keine festen Vorschriften dafür, an welcher Stelle einer HTML-Datei ein JavaScript-Bereich definiert werden muss" ...

            das ist auch nach wie vor richtig. Aber der Umkehrschluss gilt nicht: Es gibt eben ein paar Stellen, in denen <script> NICHT erlaubt ist. Zwischen <table> und <tr> ist so eine Stelle.

            So long,

            Martin

            1. Hi there,

              das ist auch nach wie vor richtig. Aber der Umkehrschluss gilt nicht: Es gibt eben ein paar Stellen, in denen <script> NICHT erlaubt ist. Zwischen <table> und <tr> ist so eine Stelle.

              Geh bitte, schön ist es nicht, auch nicht wirklich logisch, aber nenne mir einen _technischen_ Grund, warum das nicht da stehen darf...

              1. Hallo Klawischnigg.

                das ist auch nach wie vor richtig. Aber der Umkehrschluss gilt nicht: Es gibt eben ein paar Stellen, in denen <script> NICHT erlaubt ist. Zwischen <table> und <tr> ist so eine Stelle.

                Geh bitte, schön ist es nicht, auch nicht wirklich logisch, aber nenne mir einen _technischen_ Grund, warum das nicht da stehen darf...

                Weil rein technisch damit die Ausgabe einer Zeichenkette zwischen <table> und <tr> erzeugt werden könnte, welche da nichts zu suchen hätte.

                Einen schönen Sonntag noch.

                Gruß, Ashura

                1. Hi there,

                  Weil rein technisch damit die Ausgabe einer Zeichenkette zwischen <table> und <tr> erzeugt werden könnte, welche da nichts zu suchen hätte.

                  Ein Tag kann keine Zeichenkette sein, und den Inhalt hat er ohnehin auskommentiert...

                  1. Hallo Klawischnigg.

                    Weil rein technisch damit die Ausgabe einer Zeichenkette zwischen <table> und <tr> erzeugt werden könnte, welche da nichts zu suchen hätte.

                    Ein Tag kann keine Zeichenkette sein, und den Inhalt hat er ohnehin auskommentiert...

                    Wer redet vom Tag?

                    <table>  
                      <script type="text/javascript">  
                        [code lang=javascript]document.write('Was will ich hier?');
                    

                    </script>
                      <tr>
                        <td>Foo</td>
                      </tr>
                    </table>[/code]

                    Einen schönen Sonntag noch.

                    Gruß, Ashura

                    1. Hi there,

                      Ein Tag kann keine Zeichenkette sein, und den Inhalt hat er ohnehin auskommentiert...

                      Wer redet vom Tag?

                      document.write('Was will ich hier?');

                      Ja, wenn man sich absichtlich mit einem rostigen Nagel ins Auge fährt tut's auch weh...

                    2. hi,

                      Weil rein technisch damit die Ausgabe einer Zeichenkette zwischen <table> und <tr> erzeugt werden könnte, welche da nichts zu suchen hätte.

                      <table>

                      <script type="text/javascript">
                          [code lang=javascript]document.write('Was will ich hier?');

                      
                      >   </script>  
                      >   <tr>  
                      >     <td>Foo</td>  
                      >   </tr>  
                      > </table>[/code]  
                        
                      ~~~html
                      <head>  
                        <script type="text/javascript">  
                           [code lang=javascript]document.write('Was will ich hier?');
                      

                      </script>
                      </head>[/code]

                      Huch - <script> hätte nach der Argumentation also auch innerhalb von <head> absolut nichts verloren ...?

                      gruß,
                      wahsaga

                      --
                      /voodoo.css:
                      #GeorgeWBush { position:absolute; bottom:-6ft; }
                      1. Hallo wahsaga.

                        Huch - <script> hätte nach der Argumentation also auch innerhalb von <head> absolut nichts verloren ...?

                        Weshalb die andere Begründung sicher plausibler wirkt.

                        Einen schönen Montag noch.

                        Gruß, Ashura

              2. Es gibt eben ein paar Stellen, in denen <script> NICHT erlaubt ist. Zwischen <table> und <tr> ist so eine Stelle.

                nenne mir einen _technischen_ Grund, warum das nicht da stehen darf...

                Klawischnigg, ist dir

                <!ELEMENT tr       (th|td)+>   [DTD XHTML 1.0 Transitional]

                technisch genug?

                Live long and prosper,
                Gunnar

                --
                „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
                1. Hallo Gunnar.

                  Es gibt eben ein paar Stellen, in denen <script> NICHT erlaubt ist. Zwischen <table> und <tr> ist so eine Stelle.

                  nenne mir einen _technischen_ Grund, warum das nicht da stehen darf...

                  Klawischnigg, ist dir

                  <!ELEMENT tr       (th|td)+>   [DTD XHTML 1.0 Transitional]

                  technisch genug?

                  Meinst du nicht eigentlich

                  <!ELEMENT TABLE - -  
                       (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
                  

                  http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE

                  Einen schönen Sonntag noch.

                  Gruß, Ashura

                  1. Meinst du nicht eigentlich
                    <!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

                    Das möchte ich meinen. ;-) Thx.

                    Live long and prosper,
                    Gunnar

                    --
                    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
                2. Hi there,

                  Klawischnigg, ist dir

                  <!ELEMENT tr       (th|td)+>   [DTD XHTML 1.0 Transitional]

                  technisch genug?

                  Nicht ganz, imho heissts <!ELEMENT tr      0 (th|td)+> und zweitens hat er uns nicht wirklich etwas über seine doctype mitgeteilt, oder ?

                  1. Nicht ganz, imho heissts <!ELEMENT tr      0 (th|td)+>

                    Klawischnigg,
                    Dass die Notation ist den HTML-4.01-DTDs geringfügig anders ist als in den XHTML-1.0-DTDs, ist mir bekannt. Dass _inhaltlich_ kaum anderes drinsteht, auch. Deshalb hatte ich nur eine angefüht.

                    und zweitens hat er uns nicht wirklich etwas über seine doctype mitgeteilt, oder ?

                    Gibt es eine HTML-Version, in der script Kind von table sein darf? (Darum ging’s ja eigentlich, nicht um Kinder von tr.)

                    Live long and prosper,
                    Gunnar

                    --
                    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
      2. Hi there,

        sorry, vertippt, es muss:

        document.getElementById, nicht document.getElementByID heissen...

  2. Hallo,

    In der Konsole steht die Fehlermeldung: "Fehler: document.formular.spielzeit_neu has no properties". Ich stelle mal den relevanten Teil des Quellcodes (das PHP-Script ist wohl unnötig) hier rein. Es wäre nett, wenn ihr mir helfen könntet.

    document.formular.spielzeit_neu[4].style.display = 'block';

    ^Das ist auch in JavaScript die Syntax zum Ansprechen eines Arrays. Leider gibt es dieses aber hier nicht.

    <td><input type="text" name="spielzeit_neu[4]" size="2" style="display: none;" /></td>

    Die Notation document.formularname.elementname ist die Kurzschreibweise von document.forms["formularname"].elements["elementname"]. Die lange Schreibweise hat den Vorteil, dass die Items der Collections form und elements mit Hilfe eines Strings angesprochen werden. So würde bei Dir:

    document.formular.elements["spielzeit_neu[4]"].style.dislay = "block";

    funktionieren.

    Übrigens ist diese Methode, Formularelemente anzusprechen, weit besser, als sie erst per document.getElementById() im gesamten Dokumentbaum zu suchen.

    viele Grüße

    Axel

    1. ^Das ist auch in JavaScript die Syntax zum Ansprechen eines Arrays.

      Ah, das wußte ich nicht.

      Die lange Schreibweise hat den Vorteil, dass die Items der Collections form und elements mit Hilfe eines Strings angesprochen werden. So würde bei Dir:

      document.formular.elements["spielzeit_neu[4]"].style.dislay = "block";

      funktionieren.

      Cool, das funktioniert! Allerdings nur, wenn ich, wie unten von Cheatah geschrieben, das script-Element woanders hinsetze. Ich dachte erst, das geht nicht, weil ich die IDs aus der Datenbank erst in der Tabelle abfrage. Aber ich hab einfach noch ne DB-Abfrage im Dokumentkopf gemacht- manchmal brauch ich halt etwas länger ;-)

      Danke für die Hilfe,
      Onkel Schnitzel

      1. Ich hab nochmal ne kleine Nachfrage. Im head-Bereich meines Dokuments siehts jetzt so aus:

        ...function Einblenden_2() { document.formular.elements["spielzeit_neu[2]"].style.display = 'block';}
        function Einblenden_3() { document.formular.elements["spielzeit_neu[3]"].style.display = 'block';}
        function Einblenden_4() { document.formular.elements["spielzeit_neu[4]"].style.display = 'block';}...

        Da stehen jetzt insgesamt 21 Funktionen. Ist das was normales oder sollte man so etwas vermeiden?

        Gruß,
        Onkel Schnitzel

        1. Da stehen jetzt insgesamt 21 Funktionen. Ist das was normales oder sollte man so etwas vermeiden?

          Onkel,
          Wenn es zu vermeiden geht, ja.

          Du kannst den Index doch als Parameter an die (dann eine) Funktion übergeben:

          function Einblenden(index) { document.formular.elements["spielzeit_neu[index]"].style.display = 'block';}

          Aufruf mit Einblenden(1), Einblenden(2), …

          Live long and prosper,
          Gunnar

          --
          „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
          1. Hallo,

            Du kannst den Index doch als Parameter an die (dann eine) Funktion übergeben:

            Ja, das hätte ich jetzt auch vorgeschlagen, aber

            function Einblenden(index) { document.formular.elements["spielzeit_neu[index]"].style.display = 'block';}

            JavaScipt ist kein PHP.

              
            function Einblenden(index) {  
             document.formular.elements["spielzeit_neu[" + index + "]"].style.display = 'block';  
            }  
            
            

            Aufruf mit Einblenden(1), Einblenden(2), …

            viele Grüße

            Axel

            1. Klar, Axel.
              Mea culpa, hab mal wieder nicht genau genug hingesehen.

              Live long and prosper,
              Gunnar

              --
              „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
              1. Klar, Axel.
                Mea culpa, hab mal wieder nicht genau genug hingesehen.

                Heißt das, es geht nicht? Ich bin nämlich am hin und her überlegen, wie das überhaupt aussehen soll. Ich müßte doch trotzdem erst alle IDs aus der Datenbank lesen und dann den Index an die Funktionen dranhängen:

                echo  "function Einblenden(".$id.") { document.formular.elements["spielzeit_neu[".$id."]"].style.display = 'block';}\n";

                Und dann hätte ich ja wieder meine 21 Funktionen. Oder was verstehe ich da jetzt falsch?

                Gruß,
                Onkel Schnitzel

                1. Hallo,

                  echo  "function Einblenden(".$id.") { document.formular.elements["spielzeit_neu[".$id."]"].style.display = 'block';}\n";

                  Nein, nicht PHP soll die id einsetzten, sondern JavaScript.

                  Es funktioniert so, wie Gunnar es beschrieben hat. Nur musst Du eben den Operator + verwenden, um in JavaScript Strings zu verketten. JavaScript parst keine Variablen, wenn diese in Doubleqoutes stehen, wie PHP das tut. Das hatte ich verbessert.

                  viele Grüße

                  Axel

                  1. Nein, nicht PHP soll die id einsetzten, sondern JavaScript.

                    Es funktioniert so, wie Gunnar es beschrieben hat. Nur musst Du eben den Operator + verwenden, um in JavaScript Strings zu verketten.

                    Klappt! Danke nochmal an Euch Beide.

                    Gruß,
                    Onkel Schnitzel