Jump to content
Forums are read-only ×
Larry Ullman's Book Forums

Chapter 4 Help!

xdbuix
 Share

Recommended Posts

xdbuix Newbie

xdbuix

Posted
Posted

Hey Larry!

I've been working on an assignment for my class that follows chapter 4. I've posted the link towards the bottom. Essentially, it asks to combine many of the elements from chapter 4, such as formatting names and math calculators into a single calculator. I'm able to follow your examples but once I add in another element into the calculator and try to combine it, the calculator no longer works. Do you have any examples that are similar to my assignment or do you have any suggestions?

 

Dan

https://learn.vccs.edu/bbcswebdav/pid-46725904-dt-content-rid-27442089_2/courses/NV280.ITP.225.E05N.FA13/Paycheck%281%29.pdf

Link to comment
Share on other sites
xdbuix Newbie

xdbuix

Posted
  • Author
Posted

Thanks for taking a look! I'm relatively new. I understand the basic basic concepts of JavaScript after reading the chapters. It's just hard to merge it all together for this calculator. 

Dan

Assignment- https://docs.google.com/file/d/0BwDHF5mNxWWZQm1aRkpCbUFkdkE/edit?usp=sharing

Html-

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Formatting Names</title>
    <!--[if lt IE 9]>
    <![endif]-->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- names.html -->
    <form action="" method="post" id="theForm" >
        <fieldset>
<div><label for="firstname">First Name</label><input type="text" name="firstname" id="firstname" required></div>
<div><label for="lastname">Last Name</label><input type="text" name="lastname" id="lastname" required></div>
<div><label for="result">Formatted Name</label><input type="text" name="result" id="result" ></div>
<div><label for="hoursworked">Regular Hours Worked</label><input type="number" name="hoursworked" id="hoursworked" value="1" min="1" max="40" required></div>
<div><label for="overtimeworked">Overtime Hours Worked (1.5x as regular)</label><input type="number" name="overtimeworked" id="overtimeworked" value="1" min="1" max="40" required></div>
<div><label for="hourlyrate">Hourly Rate</label><input type="text" name="hourlyrate" id="hourlyrate" value="1.00" required></div>
<div><label for="regularpay">Regular Pay</label><input type="text" name="regularpay" id="regularpay" value="0.00"></div>
<div><label for="overtimepay">Overtime Pay</label><input type="text" name="overtimepay" id="overtimepay" value="0.00"></div>
<div><input type="submit" value="Submit" id="submit"></div>
        </fieldset>
    </form>
    <script src="js/test1.js"></script>
 
 
</body>

Javascript-
 
function formatnames () { 
'use strict';
var formattedname;
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
formattedname = lastname + ',' + firstname;
document.getElementById('result').value = formattedname;
return false;
} // End of formatnames () function
 
 
function init() {
'use strict';
document.getElementById('theForm').onsubmit = formatnames;
} // End of init() function.
window.onload = init;
 
function calculate() {
'use strict';
var regularpay;
var overtimepay;
 
    var hoursworked = document.getElementById('hoursworked').value;
var overtimeworked = document.getElementById('overtimeworked').value;
    var hourlyrate = document.getElementById('hourlyrate').value;
regularpay = hoursworked * hourlyrate;
overtimepay = overtimeworked * hourlyrate * 1.5;
 
document.getElementById('regularpay').value = regularpay;
return false; 
document.getElementById('overtimepay').value = overtimepaypay;
return false;    
 
function init() {
'use strict';
document.getElementById('theForm').onsubmit = calculate;
} // End of init() function.
window.onload = init;
Link to comment
Share on other sites
Larry Explorer

Larry

Posted
Posted

Well, one problem is that you've got two functions named init(). You can call the calculate() function in formatnames() or create an anonymous function that handle the form submission and have it call both calculate() and formatnames().

Link to comment
Share on other sites
xdbuix Newbie

xdbuix

Posted
  • Author
Posted

Thanks Larry! I did make some changes! I got it to mostly work. It looks like the addition for all 3 tax rates aren't adding up properly. Can you take a look? 

Much appreciated!
Dan
 

HTML-
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Paycheck</title>
    <!--[if lt IE 9]>
    <![endif]-->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- names.html -->
    <form action="" method="post" id="theForm" >
        <fieldset>
<div><label for="firstname">First Name</label><input type="text" name="firstname" id="firstname" required></div>
<div><label for="lastname">Last Name</label><input type="text" name="lastname" id="lastname" required></div>
 
 
<div><label for="hoursworked">Regular Hours Worked</label><input type="number" name="hoursworked" id="hoursworked" value="1" min="1" max="40" required></div>
<div><label for="overtimeworked">Overtime Hours Worked (1.5x as regular)</label><input type="number" name="overtimeworked" id="overtimeworked" value="1" min="1" max="40" required></div>
<div><label for="hourlyrate">Hourly Rate</label><input type="number" name="hourlyrate" id="hourlyrate" value="1.00" required> </div>
<div><label for="regularpay">Regular Pay</label><input type="text" name="regularpay" id="regularpay" ></div>
<div><label for="overtimepay">Overtime Pay</label><input type="text" name="overtimepay" id="overtimepay"> </div>
<div><label for="totalpayment">Total Pay Before Taxes</label><input type="text" name="totalpayment" id="totalpayment" ></div>
 
 
<div><label for="fica">Enter FICA Tax Rate</label><input type="number" name="fica" id="fica"> </div>
<div><label for="state">Enter State Tax Rate</label><input type="number" name="state" id="state" > </div>
<div><label for="federal">Enter Federal Tax Rate</label><input type="number" name="federal" id="federal"> </div>
 
<div><label for="taxrate">Your Total Tax Rate is</label><input type="text" name="taxrate" id="taxrate"> </div>
 
 
 
<div><label for="totaltaxes">Total Taxes</label><input type="text" name="totaltaxes" id="totaltaxes" ></div>
<div><label for="formattedname">Formatted Name</label><input type="text" name="formattedname" id="formattedname"></div>
<div><label for="netpay">Net Pay</label><input type="text" name="netpay" id="netpay" ></div>
<div><input type="submit" value="submit" id="submit"></div>
        </fieldset> 
    </form>
 
    <script src="js/paycheck.js"></script>
 
 
</body>
</html>

Javascript- 
 
 
function calculate() {
'use strict';
 
//These are the output variables that are calculated and returned to the paycheck.html form
var regularpay;
var overtimepay;
var formattedname;
var totalpayment;
var taxrate;
var totaltaxes;
var netpay;
  
//These are the input variables coming from the paycheck.html form
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
var hoursworked = document.getElementById('hoursworked').value;
var overtimeworked = document.getElementById('overtimeworked').value;
var hourlyrate = document.getElementById('hourlyrate').value;
 
var fica = document.getElementById('fica').value;
var state = document.getElementById('state').value;
var federal = document.getElementById('federal').value;
 
//These are the calculations 
 
//Calculate the regularpay
regularpay = hoursworked * hourlyrate;
 
//Calculate the overtimepay
overtimepay = overtimeworked * hourlyrate * 1.5;
 
//Calculate the pay before taxes
totalpayment = regularpay + overtimepay;
 
//Calculate the tax rate
taxrate = (fica + state + federal)/100;
 
//Calculate the total taxes
totaltaxes= totalpayment * taxrate;
 
//Calculate the netpay
netpay = totalpayment - totaltaxes;
 
//Format the regularpay
regularpay = regularpay.toFixed(2);
 
//Format the overtimepay
overtimepay = overtimepay.toFixed(2);
 
//Format the total taxes
totaltaxes = totaltaxes.toFixed(2);
 
//Format the Netpay
netpay = netpay.toFixed(2);
 
//Format the name
formattedname = lastname + ',' + firstname;
 
//These are the output variables that are calculated and returned to the paycheck.html form
document.getElementById('regularpay').value = regularpay;
document.getElementById('overtimepay').value = overtimepay;
document.getElementById('formattedname').value = formattedname;
document.getElementById('totalpayment').value = totalpayment;
document.getElementById('taxrate').value = taxrate;
document.getElementById('totaltaxes').value = totaltaxes;
document.getElementById('netpay').value = netpay;
// document.getElementById('overtimepay').value = overtimepay;  I do believe that there is a typo in this line.
// document.getElementById('formattedname').value = formattedname; //  I do believe that there is a typo in this line.
 
 
return false;   
 
}
 
function init() {
'use strict';
document.getElementById('theForm').onsubmit = calculate;
} // End of init() function.
window.onload = init;
Link to comment
Share on other sites
Larry Explorer

Larry

Posted
Posted

Ah, that's very helpful. The reason is that the values are coming in as strings, because they're from a form. So you're performing concatenation of the strings, not addition of the numbers. I mention this gotcha in the book, along with the solution.

  • Upvote 1
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...