Convert string to number in calculator
Question
I am not a programmer by trade so please don't hold my simple question against me. I am sure the answer is simple, but I can't figure it out.
I am trying to design a mulch calculator to put on my company's website. My code appears to accept the input, but is returning a NaN value. It is obviously converting to info to a string as I expected. I have tried converting it back to a number by subtracting a 0 from my last variable and also using parseInt. Neither seemed to work. Would someone be willing to explain how to fix this issue, and why your solution worked. I am trying to understand what I did wrong.
See the code below.
Thanks.
<!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>
2 answers
solution1
0 2016-03-24 18:09:47
Your input values should be put through the parseInt() function with 10 as your radix and you should check that you don't get NaN with the isNaN(num). Javascript is loosely typed but that doesn't necessarily mean you can throw variables around through types without checking them.
solution2
0 ACCPTED 2016-03-24 18:14:55
So I have fixed it!
Your problem turned out to be how you were getting the data from the input.
You used this:
var bedLength = allInfo.elements["length"].value;
I used this:
var bedLength = +allInfo["length"].value;
So essentially I removed the .elements for each place that you use the input values.
I also added:
calcscale = (calcscale).toFixed(3);
Which trims the decimal place to 3 ( so you dont get an answer like 3.111111111111111117 or something like that)!
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.