Reputation: 29
So I am making an elementary gross pay and net pay calculator in javascript/HTML. The webpage calculator takes the user inputted hours and rate, and spits out gross pay, and gross pay with tax. For some reason, it won't display the correct formula. Somewhere I made a grave error. If someone can steer me in the right direction that would be awesome.
Heres the code:
<!DOCTYPE html>
<html>
<title>Gross + Net Pay</title>
<h1>Gross + Net Pay Calculator</h1>
<p id="demo"></p>
<p id="demo2"></p>
<script>
function myFunction() {
var rate = document.getElementById("payrate");
var hours =document.getElementById("hours");
var gross = hours * rate
var net = gross * .9
if (gross != null) {
document.getElementById("demo").innerHTML = gross;
}
if (net != null) {
document.getElementById("demo2").innerHTML =net;
}
}
</script>
<body>
<form>
Pay Rate: <input type="text" id="payrate"><br>
Hours Worked: <input type="text" id="hours"><br>
<input type="submit" value="Calculate Gross + Net Pay" onclick="myFunction()">
</form>
</body>
</html>
Upvotes: 0
Views: 13686
Reputation: 199
Here is the corrected code. You had some typos, missing colons and you are also posting this via form. You don't need that unless you are handling this info in a different page.
<!DOCTYPE html>
<html>
<title>Gross + Net Pay</title>
<h1>Gross + Net Pay Calculator</h1>
<p id="demo"></p>
<p id="demo2"></p>
<script>
function myFunction() {
var rate = document.getElementById("payrate").value;
var hours =document.getElementById("hours").value;
var gross = hours * rate;
var net = gross * .9 ;
if (gross != null) {
document.getElementById("demo").innerHTML = gross;
}
if (net != null) {
document.getElementById("demo2").innerHTML =net;
}
}
</script>
<body>
Pay Rate: <input type="text" id="payrate"><br>
Hours Worked: <input type="text" id="hours"><br>
<input type="submit" value="Calculate Gross + Net Pay" onclick="myFunction()">
</body>
</html>
Upvotes: 1