JavaScript Calculator Not Working
Question
I'm following along with the examples of a JavaScript book and have come across one of the examples not working as it should. It's supposed to prevent the html form from actually being submitted to calculate.php and instead use the JavaScript function calculate() to perform the calculations. Currently, it's submitting the form instead of using the JavaScript function. My code is exactly how it is in the book and I'm not sure why it's not working correctly.
Below is the code I'm using: calculator.html
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="UTF-8" lang="en">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="display">
<p>Click To Show/Hide Calculator</p>
</div>
<form method="post" id="theForm" action="calculate.php">
<fieldset>
<legend>Calculate</legend>
<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="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>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.js"><\/script>')</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script src="js/shopping.js"></script>
</body>
And here is the JavaScript: shopping.js
function calculate() {
'use strict';
var total;
var quantity = document.getElementById('quantity');
var price = document.getElementById('price');
var tax = document.getElementById('tax');
var discount = document.getElementById('discount');
total = quantity * price;
tax /= 100;
tax++;
total *= tax;
total -= discount;
total = total.toFixed(2);
document.getElemenyById('total').value = total;
return false;
}
function init() {
'use strict';
var theForm = document.getElementById('theForm');
theForm.onsubmit = calculate;
}
window.onload = init;
$(document).ready(function() {
$("#display").click(function(){
$("#theForm").toggle();
});
});
2 answers
solution1
0 ACCPTED 2013-11-24 22:32:45
Your form tag needs an onsubmit:
<form method="post" id="theForm" action="calculate.php" onsubmit="return calculate()">
Otherwise it doesn't know to run that function.
EDIT -------
Apologies, I missed that you had it already set. The problem is easier than that anyway. This:
document.getElemenyById('total').value = total;
should be
document.getElementById('total').value = total;
The Chrome javascript console can be very valuable to finding these sorts of typo issues:
https://developers.google.com/chrome-developer-tools/docs/console
solution2
0 2013-11-24 22:35:23
This function document.getElementById returns the element and not the value of the element. And for the reason you mentioned jQuery , you can use $('#id') instead, this will return the element as well, and you can use the val() method to get the value of the element as following:
var quantity = $('#quantity').val();
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.