I currently have an assignment to take some variables and put them in a form-based calculator that passes the information to javascript and then updates after the calculations. I put the form together using an example from the book, but when I click the buttom to send the information to the Javascript, I just get a page that says "No Data Received". I've looked at if for hours, but I have no idea what the heck is happening.
HTML:
<!doctype html>
<html lang="en">
<head>
<title>Paycheck Calculator</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<form action="" method="post" id="theForm">
<fieldset>
<p>Use this form to calculate your paycheck.</p>
<div><label for="hours">Hours Worked</label><input type="text" name="hours" id="hours" value="0.00"></div>
<div><label for="rate">Pay Rate</label><input type="text" name="rate" id="rate" value="0.00"></div>
<div><label for="withholding">Withholding</label><input type="text" name="withholding" id="withholding" value="0.20"></div>
<div><label for="total">Total</label><input type="text" name="total" id="total" value="0.00"></div>
<div><label for="withheld">Withheld</label><input type="text" name="withhheld" id="withheld" value="0"></div>
<div><label for="realTotal">Final Total</label><input type="text" name="realTotal" id="realTotal" value="0"></div>
<div><input type="submit" value="Calculate" id="submit"/></div>
</fieldset>
</form>
<script src="js/paycheck.js"></script>
</body>
</html>
Javascript:
function calculate() {
'use strict';
var totalPay;
var withheld;
var realPay;
var hours = document.getElementById('hours').value;
var rate = document.getElementById('rate').value;
var withholding = document.getElementById('withholding').value;
totalPay = hours * rate;
withheld = totalPay * withholding;
realPay = totalPay - withheld;
document.getElementbyId('total').value = totalPay;
document.getElementById('withheld').value = withheld;
document.getElementById('realTotal').value = realPay;
return false;
}
function init() {
'use strict';
document.getElementById('theForm').onsubmit = calculate;
}
It barely looks any different from the textbook example, and for some reason theirs works and mine doesn't. It's driving me crazy! Please tell me it's something obvious and stupid.
Mr. Polywhirl
49.1k12 gold badges96 silver badges147 bronze badges
2 Answers 2
There's a case error in your code. Assuming you're running init() properly, you just have to change this line:
document.getElementbyId('total').value = totalPay;
To this:
document.getElementById('total').value = totalPay;
That is, change getElementbyId to getElementById
Working JSFiddle: http://jsfiddle.net/5L4478br/
answered Sep 10, 2014 at 23:56
AlliterativeAlice
12.7k9 gold badges56 silver badges73 bronze badges
Sign up to request clarification or add additional context in comments.
1 Comment
Lifeinsteps
It was, in fact, just the case error. Gosh stinking dang it! I'm just glad it wasn't a huge mess-up. Thanks so much!
- you must calls the
init()somewhere, - you have a mistake in
document.getElementbyId('total').value = totalPay;it must bedocument.getElementById('total').value = totalPay;with a capitalB.
HTML
<!doctype html>
<html lang="en">
<head>
<title>Paycheck Calculator</title>
<meta charset="utf-8">
</head>
<body>
<form action="" method="post" id="theForm" >
<fieldset>
<p>Use this form to calculate your paycheck.</p>
<div><label for="hours">Hours Worked</label><input type="text" name="hours" id="hours" value="0.00"></div>
<div><label for="rate">Pay Rate</label><input type="text" name="rate" id="rate" value="0.00"></div>
<div><label for="withholding">Withholding</label><input type="text" name="withholding" id="withholding" value="0.20"></div>
<div><label for="total">Total</label><input type="text" name="total" id="total" value="0.00"></div>
<div><label for="withheld">Withheld</label><input type="text" name="withhheld" id="withheld" value="0"></div>
<div><label for="realTotal">Final Total</label><input type="text" name="realTotal" id="realTotal" value="0"></div>
<div><input type="submit" value="Calculate" id="submit"/></div>
</fieldset>
</form>
<script type="text/javascript">
function calculate () {
'use strict';
console.log ("starting calculate");
var totalPay;
var withheld;
var realPay;
var hours = document.getElementById('hours').value;
var rate = document.getElementById('rate').value;
var withholding = document.getElementById('withholding').value;
totalPay = hours * rate;
withheld = totalPay * withholding;
realPay = totalPay - withheld;
document.getElementById('total').value = totalPay;
document.getElementById('withheld').value = withheld;
document.getElementById('realTotal').value = realPay;
console.log ("calculate finished");
return false;
}
function init() {
'use strict';
document.getElementById('theForm').onsubmit = calculate;
console.log ("inited");
}
console.log ("ready");
init();
</script>
</body>
</html>
answered Sep 11, 2014 at 0:08
marco
2521 gold badge2 silver badges8 bronze badges
1 Comment
Lifeinsteps
Thanks so much! I gave the answer to the person who posted just a little bit before you since they're both correct and the same. You were both certainly right, though!
default
initmethod which sets up theonsubmitbinding. You need something likewindow.onload = initor anonloadattribute in the body. Though there are much better ways to handle the onload event thing. Read more about that stuff here stackoverflow.com/questions/191157/window-onload-vs-body-onloadgetElementbyid('total')should begetElementById('total')(capitalization). If you wrap your logic in a try/catch block, you could useconsole.logto report errors on the console and see where things are falling over.