admin管理员组

文章数量:1427287

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>

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>
  • javascript
  • calculator
Share Improve this question edited Sep 30, 2014 at 23:08 ajb 31.7k4 gold badges61 silver badges86 bronze badges asked Sep 30, 2014 at 23:01 AndrewAndrew 291 gold badge1 silver badge7 bronze badges 6
  • 1 You put your "demo" and "demo2" elements before the <body> tag. Why? – Pointy Commented Sep 30, 2014 at 23:06
  • Because I am a noob. Should I put the body tag after h1? – Andrew Commented Sep 30, 2014 at 23:08
  • The <body> is where the page content goes. Everything you want to see on the screen should be inside the <body>. – Pointy Commented Sep 30, 2014 at 23:09
  • The <script> would usually go in the <head> part (which you don't have). I'm not a super-expert so I don't know if it's OK to put it in the body, but I always put it in the head. – ajb Commented Sep 30, 2014 at 23:10
  • Typical organization: <html> <head> ... </head> <body> ... </body>. The <title> and <script> go in the head. The page content, including the <h1> and <p>, go in the body. – ajb Commented Sep 30, 2014 at 23:12
 |  Show 1 more ment

1 Answer 1

Reset to default 1

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>

本文标签： Javascript Gross amp Net Pay CalculatorStack Overflow

版权声明：本文标题：Javascript Gross &amp; Net Pay Calculator - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745492241a2660652.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。