The-Cry: Einfache Abfrage

Hallo,

ich programmiere schon seit über 10 Jahren, will jetzt PHP, Java und Javascript lernen, habe mir schon mehreren Wochen Tutorials durchgeschaut und bisher auch alles verstanden.

Jedoch funktioniert die Abfrage, die ich gemacht habe nicht. Ich verstehe es einfach nicht:

Ich habe ein SELECT-Element mit dem onchange-Ereignis:
"document.getElementById("xy").value = document.getElementById("sct").options[document.getElementById("sct").selectedIndex].value;"

Das Element mit der ID "xy" ist ein Editfeld. Wieso wird dort nicht der selektierte Text angezeigt?

Wenn ich alles nach dem = in ein Alert reinpacke, zeigt er mir den Wert an, wieso übergibt er den Wert nicht an das Editfeld?

Wenn ich alles nach dem = in eine Variable speichere und als alert ausgebe, funktioniert es auch, wenn ich aber dann das Ergebnis dem Editfeld zuweise, macht er es nicht.

Wieso???

Vielen Dank.

TC

  1. Jedoch funktioniert die Abfrage, die ich gemacht habe nicht. ...

    "funktioniert nicht" ist keine Fehleranalyse. Wie lautet die Fehlermeldung?

    Struppi.

    1. »» Jedoch funktioniert die Abfrage, die ich gemacht habe nicht. ...

      "funktioniert nicht" ist keine Fehleranalyse. Wie lautet die Fehlermeldung?

      Struppi.

      Wie kann ich es auswerten - Schreibe im Moment unter Notepad und zum testen den IE. :-/

      TC

      1. » Struppi.

        Auch an dich dieser Hinweis, Bitte kein Tofu, Danke.

        Wie kann ich es auswerten - Schreibe im Moment unter Notepad und zum testen den IE. :-/

        Der IE ist natürlich ein Problem. Die Fehlermeldung sind versteckt in der Statusleiste (kleines gelbes Ausrufezeichen -> doppelklick) und diese leider oft auch nicht hilfreich. Wenn du Javascripte entwickeln möchtest, würde auf jeden Fall zum Firefox raten, die Fehlerkonsole ist um einiges komfortabler.

        Struppi.

        1. »»Wenn du Javascripte entwickeln möchtest, würde auf jeden Fall zum Firefox raten, die Fehlerkonsole ist um einiges komfortabler.

          Ok, werde diesen nutzen und mich noch mal mit einer genauen Fehlermeldung melden. Danke bisher ...

          TC

        2. Der IE ist natürlich ein Problem. Die Fehlermeldung sind versteckt in der Statusleiste (kleines gelbes Ausrufezeichen -> doppelklick) und diese leider oft auch nicht hilfreich. Wenn du Javascripte entwickeln möchtest, würde auf jeden Fall zum Firefox raten, die Fehlerkonsole ist um einiges komfortabler.

          Ich habe echt kein Ausrufezeichen beim IE. Im Firefox habe ich ebenfalls keinerlei Fehlermeldungen. Irgendwas mache ich anscheinend enorm falsch.

          Ich habe leider keine Möglichkeit, es online zu stellen, da ich von der Arbeit aus schreibe und ich kein Access zu unserem Webserver habe.

          Kann ich den Quelltext posten oder via E-Mail verschicken?

          Thx, TC

          1. Kann ich den Quelltext posten oder via E-Mail verschicken?

            Ja. Siehe dazu die Forumshilfe, insbesondere: Quellcode farbig markieren.

            Viele Grüße
            Def

            1.   
              <html>  
                <head>  
                  <title>StatView - Webkonfiguration</title>  
                  <style type="text/css">  
                    body {  
                      text-align: center;  
                    }  
                
                    p {  
                      margin: 5px;  
                      font-family: Tahoma;  
                      font-size: 10pt;  
                    }  
                
                    p.value {  
                      text-align: right;  
                    }  
                
                    a {  
                      color: #000000;  
                      font-family: Tahoma;  
                      font-size: 10pt;  
                      text-decoration: underline;  
                    }  
                
                    table {  
                      width: 80%;  
                    }  
                
                    td.caption {  
                      width: 50%;  
                    }  
                
                    #main {  
                      border: solid 1px #000000;  
                      width: 800px;  
                      height: 600px;  
                      text-align: left;  
                    }  
                  </style>  
                  <script type="text/javascript">  
                    function showXY() {  
                      document.getElementById("sctc").Value = document.getElementById("sct").options[document.getElementById("sct").selectedIndex].value;  
                    }  
                  </script>  
                </head>  
                <body>  
                  <div id="main">  
                  <!-- SQL CONNECTION -->  
                    <fieldset>  
                      <legend><p>SQL-Verbindung</p></legend>  
                      <table align="center">  
                        <tr>  
                          <td class="caption"><p>Hostadresse:</p></td>  
                          <td><p class="value"><input type="text" name="sql-connection-host" value="$sqlConnectionHost"></p></td>  
                        </tr>  
                        <tr>  
                          <td class="caption"><p>Portnummer:</p></td>  
                          <td><p class="value"><input type="text" name="sql-connection-port" value="$sqlConnectionPort"></p></td>  
                        </tr>  
                        <tr>  
                          <td class="caption"><p>Benutzername:</p></td>  
                          <td><p class="value"><input type="text" name="sql-connection-user" value="$sqlConnectionUser"></p></td>  
                        </tr>  
                        <tr>  
                          <td class="caption"><p>Passwort:</p></td>  
                          <td><p class="value"><input type="password" name="sql-connection-pass" value="$sqlConnectionPass"></p></td>  
                        </tr>  
                      </table>  
                    </fieldset>  
                    <p>&nbsp;</p>  
                  <!-- SQL DB TABLES -->  
                    <fieldset>  
                      <legend><p>SQL Inhalt</p></legend>  
                      <table align="center">  
                        <tr>  
                          <td class="caption"><p>Datenbank:</p></td>  
                          <td><p class="value"><input type="text" name="sql-content-db" value="$sqlContentDb"></p></td>  
                        </tr>  
                        <tr>  
                          <td class="caption"><p>Tabellen:</p></td>  
                          <td>  
                            <p class="value">  
                              <select name="sql-content-tables" id="sct" onchange="showXY();">  
                                <option value="$sqlContentTableValue">$sqlContentTableCaption</option>  
                                <option value="$sqlContentTableValue">$sqlContentTableCaption</option>  
                              </select>  
                            </p>  
                          </td>  
                        </tr>  
                        <tr>  
                          <td class="caption"><p>Anzeigename:</p></td>  
                          <td><p class="value"><input type="text" id="sctc" name="sql-content-table-caption"></p></td>  
                        </tr>  
                        <tr><td colspan="2"><hr></td></tr>  
                        <tr>  
                          <td class="caption"><p>Tabellenname:</p></td>  
                          <td><p class="value"><input type="text" name="sql-content-table-caption" value="$sqlContentTableCaption"></p></td>  
                        </tr>  
                      </table>  
                    </fieldset>  
                  </div>  
                </body>  
              </html>  
              
              
              1. Hi,

                document.getElementById("sctc").Value =

                Value als Eigenschaft gibt es nicht - nur value

                Btw.: das Dein html reichlich grottig ist weisst Du?

                Gruesse, Joachim

                --
                Am Ende wird alles gut.
                1. Value als Eigenschaft gibt es nicht - nur value

                  Btw.: das Dein html reichlich grottig ist weisst Du?

                  Hallo Joachim,

                  och ne! Ich wusste nicht, dass Javascript CS ist. Jetzt funktioniert es. Vielen Dank!
                  In wie fern ist das HTML grottig?

                  Thx TC

                  1. Hi,

                    In wie fern ist das HTML grottig?

                    Ddoctype fehlt, antikes Tabellenlayout, unsinnige Verschachtelei (p in td)... um nur ein paar Dinge zu nennen.

                    Gruesse, Joachim

                    --
                    Am Ende wird alles gut.
              2. <html>

                Das hat nichts mit JS zu tun, aber du solltest deine Seite nicht im Quirksmode darstellen lassen.

                <script type="text/javascript">
                      function showXY() {
                        document.getElementById("sctc").Value = document.getElementById("sct").options[document.getElementById("sct").selectedIndex].value;
                      }
                    </script>

                JS unterscheidet zwischen Groß- und Kleinschreibung, das Attribut http://de.selfhtml.org/javascript/objekte/elements.htm#value@title=Value gibt es nicht.

                und diese Funktion ist extrem umständlich.

                <select name="sql-content-tables" id="sct" onchange="showXY();">
                                  <option value="$sqlContentTableValue">$sqlContentTableCaption</option>
                                  <option value="$sqlContentTableValue">$sqlContentTableCaption</option>
                                </select>

                Du kannst hier bei dem Eventhandler die Referenz auf das Feld übergeben.
                <select name="sql-content-tables" id="sct" onchange="showXY(this);">

                Dann wird deine Funktion zu:

                <script type="text/javascript">  
                       function showXY(el) {  
                         el.form['sql-content-table-caption'].value = el.options[el.selectedIndex].value;  
                       }  
                </script>  
                
                

                Struppi.

                1. aber du solltest deine Seite nicht im Quirksmode darstellen lassen.

                  Was ist der Quirksmode?

                  JS unterscheidet zwischen Groß- und Kleinschreibung, das Attribut http://de.selfhtml.org/javascript/objekte/elements.htm#value@title=Value gibt es nicht.

                  Ich wusste nicht, dass JS CS ist. Habe es geändert und es funktioniert jetzt. Super, vielen Dank für Deine Hilfe!

                  Dann wird deine Funktion zu:

                  ~~~javascript <script type="text/javascript">
                         function showXY(el) {
                           el.form['sql-content-table-caption'].value = el.options[el.selectedIndex].value;
                         }
                  </script>

                    
                  Wieso wird im Quelltext dann `form`{:.language-javascript} benutzt? Ich hätte jetzt `el.value`{:.language-javascript} geschrieben, wiel ich es doch mit `this`{:.language-javascript} schon übergeben habe, oder was verstehe ich da falsch?  
                    
                  Vielen Dank.  
                    
                  Jo
                  
                  1. » aber du solltest deine Seite nicht im Quirksmode darstellen lassen.

                    Was ist der Quirksmode?

                    Lass mich das für ich google.

                    Wieso wird im Quelltext dann form benutzt? Ich hätte jetzt el.value geschrieben, wiel ich es doch mit this schon übergeben habe, oder was verstehe ich da falsch?

                    Ja. el ist das select Element, du willst den ausgewählten Wert in einem anderen Feld eintragen. Dieses erreichst du mit el.form.http://de.selfhtml.org/javascript/objekte/elements.htm@title=elements['name']

                    Struppi.

                    1. Lass mich das für ich google.

                      Ja, ist mir im Nachhinein auch eingefallen - Werde den DocType noch einfügen. Danke für den Hinweis.

                      Ja. el ist das select Element, du willst den ausgewählten Wert in einem anderen Feld eintragen. Dieses erreichst du mit el.form.http://de.selfhtml.org/javascript/objekte/elements.htm@title=elements['name']

                      Habe mir dem Link angeschaut - Verstehe ich im Ansatz, aber verinnerlicht habe ich es noch nicht - Wird denke ich mit der Praxis kommen.

                      Vielen Dank für Deine fachlich hilfreiche Unterstützung!

                      Liebe Grüße

                      Jo

                  2. Lieber thecry,

                    |  ~~~javascript

                    <script type="text/javascript">

                    |        function showXY(el) {
                    |          el.form['sql-content-table-caption'].value = el.options[el.selectedIndex].value;
                    |        }
                    | </script>

                    
                    >   
                    > Wieso wird im Quelltext dann `form`{:.language-javascript} benutzt? Ich hätte jetzt `el.value`{:.language-javascript} geschrieben, wiel ich es doch mit `this`{:.language-javascript} schon übergeben habe  
                      
                    Struppi ist ein schlauer Fuchs und macht sich den Umstand zunutze, dass jedes <input>-Element das jeweilige übergeordnete <form>-Element als eine Eigenschaft speichert.  
                      
                    "el" enthält eine Referenz auf das <select>-Element. Das <select>-Element kann zwar eine Eigenschaft "value" erhalten, jedoch ist das nicht das, was Du willst. Du willst in einem anderen Element (in einem <input type="text">-Element) den selektierten Wert eintragen. Dazu brauchst Du eine Referenz auf dieses Input-Feld. Entweder Du benutzt dazu wie bisher document.getElementById(), oder Du nutzt den Umstand, dass beide Eingabe-Elemente im selben <form>-Element sitzen, um über dieses Element Dein <input>-Element zu referenzieren.  
                      
                    Liebe Grüße,  
                      
                    Felix Riesterer.
                    
                    -- 
                    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
                    
                    1. Hallo Felix,

                      vielen Dank für Deine ausführliche Erläuterung.

                      Liebe Grüße

                      Jo

                  3. Was ist der Quirksmode?

                    siehe DOCTYPE Switch

                    Mathias

                  4. Hi,

                    Ich wusste nicht, dass JS CS ist.

                    Und über so elementare Eigenschaften einer Sprache, mit der er sich neu beschäftigt, informiert sich jemand, der im Eingangsposting erst mal aller Welt unter die Nase reibt, wie lange er schon programmiert, nicht mal im Vorfeld ...?

                    MfG ChrisB

                    --
                    Light travels faster than sound - that's why most people appear bright until you hear them speak.
        3. »»Wenn du Javascripte entwickeln möchtest, würde auf jeden Fall zum Firefox raten, die Fehlerkonsole ist um einiges komfortabler.

          Ich habe die Fehler-Konsole gefunden, sind aber leider keine Fehler drin. Reiter ALLE ist ausgewählt.

          Wenn ich jetzt in die Zeile eingebe:

          document.getElementById("sctc").Value=document.getElementById("sct").options[document.getElementById("sct").selectedIndex].value;

          Fehler: document.getElementById("sct") is null
          Quelldatei: javascript:%20document.getElementById("sctc").Value=document.getElementById("sct").options[document.getElementById("sct").selectedIndex].value;
          Zeile: 1

          Im Browser ist ein Eintrag aber manuell selektiert worden.

          Hier das Select-Element:
          <select name="sql-content-tables" id="sct" onchange="showXY();">
            <option value="$sqlContentTableValue">$sqlContentTableCaption</option>
            <option value="$sqlContentTableValue">$sqlContentTableCaption</option>
          </select>

          Hier das Editfeld:
          <input type="text" id="sctc" name="sql-content-table-caption">

          Was mache ich falsch oder denke ich falsch???

          Thx TC