Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Nancy Melucci
Courses Plus Student 36,659 PointsWhy does form stop working when I add shipping variable?
I have functioning code for a form that gives a sales total after tax. The assigned task is to add a control for shipping which is not on the original version. An event handler is attached to a calculate button.
As soon as I add the code to the html and js files, the calculator no longer works. I've looked and looked and I cannot figure out why it no longer works.
I am including the html code and the javascript. Thanks.
NJM
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shopping Calculator</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- shopping.html -->
<form action="" method="post" id="theForm">
<fieldset>
<p>Use this form to calculate the order total.</p>
<div><label for="quantity">Quantity</label><input type="number" name="quantity" id="quantity" value="1" min="1" required></div>
<div><label for="price">Price Per Unit</label><input type="text" name="price" id="price" value="1.00" required></div>
<div><label for="tax">Tax Rate (%)</label><input type="text" name="tax" id="tax" value="0.0" required></div>
<div><label for="discount">Discount</label><input type="text" name="discount" id="discount" value="0.00" required></div>
<div><label for="shipping">Shipping</label><input type="text" name="shipping" id="shipping" value="0.00" min="0"</div>
<div><label for="total">Total</label><input type="text" name="total" id="total" value="0.00"></div>
<div><input type="submit" value="Calculate" id="submit"></div>
</fieldset>
</form>
<script src="js/shopping.js"></script>
</body>
</html>
erforms the calculation and returns false.
function calculate() {
'use strict';
var total;
var quantity = document.getElementById('quantity').value;
var price = document.getElementById('price').value;
var tax = document.getElementById('tax').value;
var discount = document.getElementById('discount').value;
var shipping = document.getElementById('shipping').value;
total = quantity * price;
tax /= 100;
tax++;
total *= tax;
total -= discount;
total += shipping;
// Format the total:
total = total.toFixed(2);
document.getElementById('total').value = total;
return false;
} // End of calculate() function.
function init() {
'use strict';
document.getElementById('theForm').onsubmit = calculate;
} // End of init() function.
window.onload = init;
4 Answers
Raphaël Seguin
Full Stack JavaScript Techdegree Graduate 29,228 PointsHi, it seems there are several problems with your form.. 1 - there is a default behaviour that reloads the form with its default values when it's submitted. I tried jQuery .preventDefault() on the submit event and it worked but there should be a better solution. 2 - the values you're getting from the inputs price, tax, discount and shipping are not numbers, so you need parseFloat to turn it to numbers. 3 - Your calculation is wrong, a right formula looks like this : "total = quantity * price * ((tax / 100) + 1) - discount + shipping;"
Here is the modified script. I hope it helps.
$('#theForm').on('submit', (event) => {
event.preventDefault();
calculate();
});
function calculate() {
'use strict';
var total;
var quantity = document.getElementById('quantity').value;
var price = parseFloat(document.getElementById('price').value);
var tax = parseFloat(document.getElementById('tax').value);
var discount = parseFloat(document.getElementById('discount').value);
var shipping = parseFloat(document.getElementById('shipping').value);
var totalDisplay = document.getElementById('total');
total = quantity * price * ((tax / 100) + 1) - discount + shipping;
console.log("total : " + total);
// Format the total:
//total = total.toFixed(2);
totalDisplay.value = total;
return false;
} // End of calculate() function.
Raphaël Seguin
Full Stack JavaScript Techdegree Graduate 29,228 PointsWell, that's strange. I tested the 3 fixes I suggested to you one by one.
Ho ! Maybe, it's because i didn't use onload method like you, I put the script at the bottom of the body instead. And don't forget to link jQuery (just for the preventDefault method) before the script !
Nancy Melucci
Courses Plus Student 36,659 PointsThe original code was provided by the prof. The directive was to add the shipping variable. Which was all I did originally. Another treehouse denizen alerted me to a missing tag closure, which was a brain fart that occurred when I was literally trying not to fall asleep while posting the request for help. I know that mistake wasn't there previously.
I am going to download the original code, try writing an identical file variable by variable, add my shipping variable again (with correct tag closures) and then apply your solution. I'll let you know what happens. Nancy M.
Raphaël Seguin
Full Stack JavaScript Techdegree Graduate 29,228 PointsHaha ok ! I had no idea ! I copied and paste in atom and since it behaved strangely, I fixed everything I thought was wrong :) ! Let me know how it goes.
Nancy Melucci
Courses Plus Student 36,659 PointsNancy Melucci
Courses Plus Student 36,659 PointsThis didn't seem to fix it either...although admittedly I was up in the wee hours trying this and may not have been 100% clear. I am going to try to put it together piece by piece later. I'll try this again too. Thank you for responding.