Sören: Berechnung funzt nicht

Hi,

ich hab folgenden code:

<html>
<body>
<script type="text/javascript">
var vollbr = 10;
zustand = new Array(1, 0.5, 0.35, 0.15);
var speed = document.getElementById('speed').value;
var state = document.getElementById('state').index;
var beschl = zustand[state]*vollbr
function xyz(){
var way = ((speed*speed)/10)/(2*beschl)
document.getElementById('output').innerHTML = 'Es werden '+way+' Meter benötigt'
}
</script>
<center>
<table>
<tr><td>Geschwindigkeit:</td><td><input type="text" id="speed"></td></tr>
<tr><td>Fahrbahnzustand:</td><td><select id="state"><option>trocken</option><option>nass</option><option>schneebedeckt</option><option>eisig</option></select></td></tr>
<tr><td colspan=2>&nbsp;</td></tr>
<tr><td id="output" colspan=2></td></tr>
<tr><td><input type="button" value="Berechnen" onCLick=xyz()></td><td><input type="button" value="Clear" onClick='document.getElementById("speed").value="&nbsp;";document.getElementById("output").innerHTML="&nbsp;"'></td></tr>
</table>
</body>
</html>

die berchnung von "beschl" funktioniert nicht. ich vermute das es an "state" liegt. weiß aber nicht wieso.

Zur erklärung wie das ganze funktionieren soll:

ich geb im dem eingabe feld eine Geschwindigkeit ein
und wenn ich danm auf Berechnen Klicke soll mir der Bremsweg ausgegebenw erden.

dabei nehm ich zuerst den inhalt der eingabefeldes und speicher es in der variable "speed"
als nächstes will ich in der variablen "state" die indexnummer der auswahlliste speichern.
in der variable "beschl" soll die zahl die ich in "state gespeichert habe die indexnumer von zustand sein. dies multiplizier ich dann mit einem festen wert.
das ganze soll am schluss dann noch ausgegeben werden.

mfg
Sören

  1. Hi,

    var state = document.getElementById('state').index;
    [...]
    als nächstes will ich in der variablen "state" die indexnummer der auswahlliste speichern.

    Ohne mich mit deinem Rechenweg näher zu beschäftigen: du greifst auf die Indexnummer des ausgewählten Eintrags über die Eigenschaft selectedIndex zu.

      
    var state = document.getElementById('state').selectedIndex;  
    
    

    Gruß,
    Felix

    --
    Mein Arzt sagt, ich habe eine missgebildete Bürgerpflichtsdrüse und eine angeborene Schwäche am moralischem Rückrat.
    Ford Prefect in Per Anhalter durch die Galaxis - Douglas Adams
  2. Hallo,

    Da liegt so einiges im Argen. Ich würde erst einmal dafür sorgen, dass keine Fehlermeldung mehr erscheint beim Laden der Seite.

    Es fehlen z.B. einige Semikolons.

    Dann:

    var way = ((speed*speed)/10)/(2*beschl)

    Hier fehlt eine Klammer, bzw. eine ist zu viel.

    Was aber das schlimmste ist:
    Du willst bereits im Header auf Elemente im Body zugreifen, der noch gar nicht geladen ist. Das kann so natürlich nicht funktionieren.

    Gruß, Don P

    1. Hi,

      Es fehlen z.B. einige Semikolons.

      Was ja _theoretisch_ zulässig ist.

      Was aber das schlimmste ist:
      Du willst bereits im Header auf Elemente im Body zugreifen, der noch gar nicht geladen ist. Das kann so natürlich nicht funktionieren.

      Das hab ich übersehen. Die Elemente müssen natürlich innerhalb der Funktion abgerufen werden.

        
      <script type="text/javascript">  
      var vollbr = 10;  
      var zustand = new Array(1, 0.5, 0.35, 0.15);  
        
      function xyz(){  
        var speed = document.getElementById('speed').value;  
        var state = document.getElementById('state').selectedIndex;  
        var beschl = zustand[state]*vollbr;  
        var way = ((speed*speed)/10)/(2*beschl));  
        document.getElementById('output').innerHTML = 'Es werden '+way+' Meter benötigt';  
      }  
      </script>  
      
      

      Ein paar Stiltipps an Sören:
      1. Immer Semikolons verwenden, auch wenn es nicht unbedingt erforderlich ist.
      2. Sinnvolle Funktionsbezeichnungen.
      3. Ein paar mehr Zeilenumbrüche im HTML-Code wären auch nicht falsch ;)

      Gruß
      Felix

      --
      Nichts auf der Welt ist so gerecht verteilt wie der Verstand. Denn jedermann ist überzeugt, dass er genug davon habe.
      René Descartes
    2. Hallo,

      var way = ((speed*speed)/10)/(2*beschl)
      Hier fehlt eine Klammer, bzw. eine ist zu viel.

      Stimmt gar nicht, war schon ok so. Da habe ich mich verzählt.
      Man sollte wirklich ein paar Stilregeln einhalten, um den Quellcode übersichtlich zu halten. So funktioniert es jedenfalls:

        
      <html>  
      <head>  
      <script type="text/javascript">  
      [code lang=javascript]  
       var vollbr = 10;  
       var zustand = [1, 0.5, 0.35, 0.15];  
       function xyz() {  
        var speed = document.getElementById('speed').value;  
        var state = document.getElementById('state').selectedIndex;  
        var beschl = zustand[state] * vollbr;  
        var way = ((speed * speed) / 10) / (2 * beschl);  
        document.getElementById('output').innerHTML = 'Es werden ' + way + ' Meter benötigt';  
       }
      

      </script>
      </head>
      <body>
       <center>
        <table>
         <tr>
          <td>Geschwindigkeit:</td><td><input type="text" id="speed"></td>
         </tr>
         <tr>
          <td>Fahrbahnzustand:</td><td><select id="state"><option>trocken</option><option>nass</option><option>schneebedeckt</option><option>eisig</option></select></td>
         </tr>
         <tr>
          <td colspan=2>&nbsp;</td>
         </tr>
         <tr>
          <td id="output" colspan=2></td>
         </tr>
         <tr>
          <td><input type="button" value="Berechnen" onCLick="xyz;"></td>
          <td><input type="button" value="Clear" onClick='document.getElementById("speed").value="&nbsp;";document.getElementById("output").innerHTML="&nbsp;";'></td>
         </tr>
        </table>
       </center>
      </body>
      </html>[/code]

      Zum validieren von javascript-Quelltext eignet sich z.B. JSLint.

      Gruß, Don P

      1. Hallo,

        Mist, doch noch ein Fehler von mir drin, es muss natürlich heißen:
        <input type="button" value="Berechnen" onCLick="xyz();">

        Gruß, Don P

  3. danke für die Hilfe.

    ich musste einfach nur das .index in ein .selected index umwandeln.

    Bei der Lösung die gepostet wurde ist eine Klammer bei der variablen way zu viel am ende.

    Hier nochmal der Code, so wie er funktioniert. Ich hab noch eingebaut, das er den wert auf 2 stellen nach dem komma rundet und das er cm ausgibt, wenn der wert zu klein wird.

    <html>
    <body>
    <script type="text/javascript">
    var vollbr = 10;
    zustand = new Array(1, 0.5, 0.35, 0.15);
    function xyz(){
    var speed = document.getElementById('speed').value;
    var state = document.getElementById('state').selectedIndex;
    var beschl = zustand[state]*vollbr;
    var way = ((speed*speed)/10)/(2*beschl);
    if (Math.round(way)<1){
     way2 = Math.round(way*10000)/100
     document.getElementById('output').innerHTML = 'Es werden '+way2+' cm benötigt';
     } else {
     way2 = Math.round(way*100)/100
     document.getElementById('output').innerHTML = 'Es werden '+way2+' Meter benötigt';
     }
    }
    </script>
    <center>
    <table>
    <tr><td>Geschwindigkeit:</td><td><input type="text" id="speed"></td></tr>
    <tr><td>Fahrbahnzustand:</td><td><select id="state"><option>trocken</option><option>nass</option><option>schneebedeckt</option><option>eisig</option></select></td></tr>
    <tr><td colspan=2>&nbsp;</td></tr>
    <tr><td id="output" colspan=2></td></tr>
    <tr><td colspan=2>&nbsp;</td></tr>
    <tr><td><input type="button" value="Berechnen" onCLick=xyz()></td>
    <td><input type="button" value="Clear" onClick='document.getElementById("speed").value="&nbsp;";document.getElementById("output").innerHTML="&nbsp;"'></td></tr>
    </table>

    </body>
    </html>

    P.S. wie bekomm ich textteile farbig hin? also hier im forum, nciht in html.

    1. Hallo Sören,

      P.S. wie bekomm ich textteile farbig hin? also hier im forum, nciht in html.

      das steht in der Hilfe: http://forum.de.selfhtml.org/hilfe/bedienung.htm#syntax-highlighting.

      Freundliche Grüße

      Vinzenz

      1. Latex-Test (nicht jenes, welches vor ungewolltem Zuwachs schützt),

        Das Problem muss an der
        [latex]
        \sqrt{   }
        [/latex]
        angepackt werden.

        Ein neutrales Verhältnis sieht so aus:
        [latex]
        \pm
        [/latex]

        Ja ich glaube das latex kann man gut in einen Thread einbauen *g*