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>
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>