2016-03-24 12 views
0

Ich bin kein Programmierer von Beruf, also bitte halten Sie nicht meine einfache Frage gegen mich. Ich bin mir sicher, dass die Antwort einfach ist, aber ich kann es nicht herausfinden.Konvertiere Zeichenkette zu Zahl in Rechner

Ich versuche, einen Mulchrechner zu entwerfen, um auf die Website meiner Firma zu setzen. Mein Code scheint die Eingabe zu akzeptieren, gibt aber einen NaN-Wert zurück. Es wird offensichtlich zu Info in eine Zeichenfolge konvertiert, wie ich es erwartet habe. Ich habe versucht, es zurück zu einer Zahl zu konvertieren, indem ich eine 0 von meiner letzten Variable subtrahiere und parseInt auch verwende. Keine schien zu funktionieren. Wäre jemand bereit zu erklären, wie Sie dieses Problem beheben können und warum Ihre Lösung funktioniert? Ich versuche zu verstehen, was ich falsch gemacht habe.

Siehe den nachstehenden Code.

Danke.

<!DOCTYPE html> 
<html> 

<head> 

</head> 

<body> 
<h1>Mulch Calculator</h1> 

<form name="calcInput" id="calcInfoInput"> 

The length of the area you need to cover (in feet). <input type="text" name="length" 
<br></br> 
<br></br> 
The width of the area you need to cover (in feet). <input type="text" `enter code here`name="width" 
<br></br> 
<br></br> 
The depth of coverage you need (in inches). <input type="text" name="depth" 
<br></br> 
<br></br> 
</form> 
<input type="submit" value="Calculate Your Mulch Needs." onclick="processForm()" name="submit"> 
<input type="reset" value="Clear This Form."> 

</form> 
<script type ="text/javascript"> 


function processForm() 
{ 
var allInfo = document.getElementById ("calcInfoInput"); 
var bedLength = allInfo.elements["length"].value; 
var bedWidth = allInfo.elements["width"].value; 
var bedDepthInches = allInfo.elements["depth"].value; 
var squareFeet = bedLength * bedWidth; 
var bedDepth = bedDepthInches/12; 
var cubicFeet = squareFeet * bedDepth; 
var cubicYards = cubicFeet/27; 
//cubicYards = cubicYards-0; 
//cubicYards = parseInt(cubicYards, 10); 
document.write('You will need at least '+ cubicYards +' cubic yards for your project.'); 
} 

</script> 

</body> 

+0

Sie müssen '0' für den Wert von "leeren" Eingänge spec. Außerdem würde eine type = Zahl netter UX liefern. – dandavis

+0

Sie können Ihre Eingabewerte zu Ganzzahlen zwingen, indem Sie ihnen '' 'voranstellen:' + allInfo.elements ["length"]. Value' oder mithilfe von 'parseInt (allInfo.elements [" length "]. Value, 10) ; '. – Andy

+0

Danke dandavis und Andy. Ich schätze Ihre Hilfe. –

Antwort

0

Also ich habe es behoben!

Ihr Problem stellte sich heraus, wie Sie die Daten von der Eingabe erhalten haben.

Sie verwendet diese:

var bedLength = allInfo.elements["length"].value; 

ich benutzten:

var bedLength = +allInfo["length"].value; 

So im Wesentlichen entfernte ich die .elements für jeden Ort, den Sie die Eingabewerte verwenden.

ich auch hinzugefügt:

calcscale = (calcscale).toFixed(3); 

, die die Nachkommastelle bis 3 trimmt (so müssen Sie nicht eine Antwort wie 3,111111111111111117 oder so ähnlich bekommen)!

function calculate() { 
 
    var allInfo = document.getElementById("calcInfoInput"); 
 
    var bedLength = +allInfo["length"].value; 
 
    var bedWidth = +allInfo["width"].value; 
 
    var bedDepthInches = +allInfo["depth"].value; 
 
    var squareFeet = bedLength * bedWidth; 
 
    var bedDepth = bedDepthInches/12; 
 
    var cubicFeet = squareFeet * bedDepth; 
 
    var cubicYards = cubicFeet/27; 
 
    //cubicYards = cubicYards-0; 
 
    //cubicYards = parseInt(cubicYards, 10); 
 
    output = (cubicYards).toFixed(3); 
 
    document.getElementById("result").innerHTML = 'You will need at least ' + output + ' cubic yards for your project.'; 
 
}
<body> 
 
    <h1>Mulch Calculator</h1> 
 

 
    <form name="calcInput" id="calcInfoInput"> 
 

 
    The length of the area you need to cover (in feet). 
 
    <input type="text" name="length" /> 
 
    <br> 
 
    <br>The width of the area you need to cover (in feet). 
 
    <input type="text" name="width" /> 
 
    <br> 
 
    <br>The depth of coverage you need (in inches). 
 
    <input type="text" name="depth" /> 
 
    <br> 
 
    <br> 
 
    </form> 
 
    <input type="submit" id="byBtn" value="Calculate You're Mulch Needs." onclick="calculate()" /> 
 
    <input type="reset" value="Clear This Form."> 
 
    <br> 
 
    <br> 
 
    <div id="result"></div> 
 

 
    </form> 
 

 

 
</body>

+0

Trevor, danke für die Zeit, die Sie damit verbracht haben. Ich lief es und es sieht gut aus. Sie haben auch eine der nächsten Ausgaben, die ich angehen wollte, behoben, indem Sie die Zahlen nach der Dezimalzahl gekürzt haben. –

+0

Nun, wenn das Ihr Problem gelöst hat, drücken Sie bitte das Häkchen neben meiner Antwort, um es zu akzeptieren! Froh, dass ich helfen konnte! –

+0

Auch ... nur damit Sie wissen .. wenn Sie dies auf Ihrer Website oder wo auch immer einfügen, müssen Sie das Javascript zurück in Ihre Tags .. sowie die < ! DOCTYPE html>, und Tags! –

0

Ihre Eingabewerte sollten als radix mit 10 durch die Funktion parseInt() gesetzt werden und Sie sollten überprüfen, ob Sie bekommen NaN nicht mit dem isNaN (num). Javascript ist locker typisiert, aber das bedeutet nicht unbedingt, dass Sie Variablen durch Typen werfen können, ohne sie zu überprüfen.

+0

'parseInt' ist der schlechteste Weg, Zahlen in JS zu konvertieren; langsam auszuführen, relativ viel Code zu schreiben/lesen, es braucht 2 Argumente, es produziert nur Ints, und ja, das ist genug Argumentation ... – dandavis

Verwandte Themen