2015-02-24 13 views
6

Ich habe ein paar Probleme mit der Berechnung einiger Sachen mit JS und bekomme die richtigen Werte aus den Eingabefeldern (Nummer). Wenn ich diesen Code verwende, zeigt er nichts. Also, was ist los mit meinem JS? Muss ich eine Jquery-Datei hinzufügen?Eingabe Eingabewert mit JS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
</head> 
<body> 
     <form id="frm1" action="Calculate.html"> 
      <table width="350px" border="1px"> 
       <tr> 
        <th colspan="2">Availability</th> 
       </tr>  
       <tr> 
        <td>Total Production Time</td> 
        <td><input type="number" name="TotalProductionTime" placeholder=""> hours</td> 
       </tr> 
       <tr> 
        <td>Breaks</td> 
        <td><input type="number" name="Breaks" placeholder=""> minutes</td> 
       </tr> 
       <tr> 
        <td>Malfunctions</td> 
        <td><input type="number" name="Malfunctions" placeholder=""> minutes</td> 
       </tr> 
       <tr> 
        <td>Theoretical production time:</td> 
        <td><p id="test"></p></td> 
       </tr> 
      </table> 

<input type="button" onclick="Calculate()" name="Calculate" value="calculate"> 
<script> 
    function Calculate() 
    { 
     var TotalProductionTime = document.getElementById("TotalProductionTime").value; 
     var TotalProductionTimeInMinutes = TotalProductionTime * 60; 
     var Breaks = document.getElementById("Breaks").value; 
     var Malfunctions = document.getElementById("Malfunctions").value; 
     var TheoreticalProductionTime = TotalProductionTimeInMinutes - Breaks - Malfunctions;  

     document.getElementById("test").innerHTML = TheoreticalProductionTime; 
    } 
</script> 

</body> 
</html> 

Vielen Dank im Voraus.

+1

'gehen .value' einen String zurückgibt. Verwende 'parseInt (x, 10)' oder 'parseFloat'. –

+2

Sie verwenden 'getElementById' und Sie haben keine ID gesetzt. –

+0

mögliches Duplikat von [Get-Wert von mit JS, wenn es nicht-numerische Zeichen enthält] (http://stackoverflow.com/questions/15627341/get-value-of-input-type-number -mit-js-wann-es-enthält-nicht-numerische-Zeichen) –

Antwort

9

Sie hatten einige Fehler in Ihrem HTML, aber hier eine funktionierende Geige: Fiddle Sie versuchen, Elemente über ihre ID zu erhalten, aber Sie geben ihnen keine ID, geben Sie ihnen einen Namen. Hören Sie auch auf, JavaScript-Aufrufe inline zu verwenden.

<form id="frm1" action="Calculate.html"> 
    <table width="350px" border="1px"> 
     <tr> 
      <th colspan="2">Availability</th> 
     </tr> 
     <tr> 
      <td>Total Production Time</td> 
      <td> 
       <input type="number" id="TotalProductionTime" placeholder="">hours</td> 
     </tr> 
     <tr> 
      <td>Breaks</td> 
      <td> 
       <input type="number" id="Breaks" placeholder="">minutes</td> 
     </tr> 
     <tr> 
      <td>Malfunctions</td> 
      <td> 
       <input type="number" id="Malfunctions" placeholder="">minutes</td> 
     </tr> 
     <tr> 
      <td>Theoretical production time:</td> 
      <td> 
       <p id="test"></p> 
      </td> 
     </tr> 
    </table> 
    <input type="button" onclick="Calculate()" value="calculate"> 

JS:

function Calculate() { 
     var TotalProductionTime = document.getElementById("TotalProductionTime").value; 
     var TotalProductionTimeInMinutes = TotalProductionTime * 60; 
     var Breaks = document.getElementById("Breaks").value; 
     var Malfunctions = document.getElementById("Malfunctions").value; 
     var TheoreticalProductionTime = TotalProductionTimeInMinutes - Breaks - Malfunctions; 

     document.getElementById("test").innerHTML = TheoreticalProductionTime; 
    } 
+0

Danke, was hast du geändert? : x aahhwww nvm Ich sehe es jetzt .. No ID ist genau so, wie Yerko Palma erwähnt. Mein Gott: x – Bart

+0

Der 'Name' des Buttons muss sich von der' onclick' Funktion unterscheiden oder in deinem Fall würde ich ihn ('name') rauslassen. Auch wenn Sie die Elemente nach ID möchten, geben Sie ihnen eine ID und keinen Namen. – Michelangelo

2

Sie haben hier zwei Probleme. Eine offensichtliche ist, dass Sie versuchen, einen Verweis auf die Formulareingaben von id zu bekommen, aber gab ihnen keine (Sie gaben ihnen eine name). Um dies zu beheben, ändern Sie entweder das name Attribut auf ein id oder verwenden Sie das Formular spezifische Weise, sie zu verweisen, zum Beispiel:

var TotalProductionTime = document.forms.frm1.TotalProductionTime 

Zweites Problem ist bösartig und hat mit dem Umfang der Ausführung zu tun, was Sie setzen in onclick Attribute. Sie sehen, Ihre Schaltfläche heißt genau wie Ihre Funktion "Calculate", und im Kontext des Attributs onclick wird die übergeordnete Form zum Auflösen von Bezeichnern vor dem globalen Gültigkeitsbereich verwendet. Anstatt also die Funktion namens Calculate aufzurufen, versuchen Sie, die Schaltfläche selbst aufzurufen. Fix, dass von ihnen verschiedene Namen zu geben, verweisen window.Calculate explizit oder viel besser, definieren Sie Ihre Event-Handler in JavaScript statt mit dem HTML-Attribute:

document.forms.frm1.Calculate.onclick=Calculate 
1

Jede ID muss integer umgewandelt werden. Beispiel

var Malfunctions = parseInt(document.getElementById("Malfunctions").value); 

dann bereit

Verwandte Themen