Jump to content
Larry Ullman's Book Forums

Chapter 5 Calculator


Recommended Posts

Hi everyone, I'm currently working on an assignment for my class that involves me creating a calculator and displaying certain form values with if then else statements. I attached a file to the assignment I'm working on below. So far my problem with this assignment is in ("Step 3, e") this step in the assignment requires me to create an if then else statement for hoursWorked between 0 and 80 and hourlyRate between 0 and 100. The next part of this assignment tells me if the conditions aren't met I must provide an error message, here is where I encountered problems in this assignment. When working on this assignment I got my error message to display but not in the right place, the error message is supposed to appear only during invalid data tests instead, the error message appears every time I click the submit button which I don't want it to do. I think the problem has to do with how I'm writing my if statement and I would appreciate it if anyone could look over my code and give me advice on how to display the error message properly, my code is listed down below. 

function calculate() {
    
    'use strict';
    
    var hoursWorked = document.getElementById('hoursWorked').value;
    
    if (hoursWorked.value <= 80 && hourlyRate.value <= 100) {
        
        } else { // Show an error:
    
     alert('Please enter valid hours and a valid payrate!');
    
    }
        
    var regularHours = document.getElementById('regularHours').value;
    
    var overtimeHours = document.getElementById('overtimeHours').value;
    
    var hourlyRate = document.getElementById('hourlyRate').value;
    
    var ficaTax = document.getElementById('ficaTax').value;
    
    var stateTax = document.getElementById('stateTax').value;
    
    var federalTax = document.getElementById('federalTax').value;
    
    var regularPay = document.getElementById ('regularPay').value = parseFloat(regularHours*hourlyRate).toFixed(2);
    
    var overtimePay = document.getElementById ('overtimePay').value = parseFloat(overtimeHours*(hourlyRate*1.5)).toFixed(2);
    
    var grossPay = document.getElementById ('grossPay').value = parseFloat(+regularPay+ +overtimePay).toFixed(2);
    
    var totalTaxes = document.getElementById ('totalTaxes').value = parseFloat(+ficaTax+ +stateTax+ +federalTax)* grossPay /100 .toFixed(2);
    
    var netPay = document.getElementById ('netPay').value = parseFloat(grossPay-totalTaxes).toFixed(2);
    
    
    
    var employeeName;
    
    var firstName = document.getElementById('firstName').value;
    
    var lastName = document.getElementById('lastName').value;
    
    employeeName = firstName + ' ' + lastName;
    
    document.getElementById('employeeName').value = employeeName;
    
    return false;
    
} // End of function.

function init() {
    
    'use strict';
    
    document.getElementById('form1').onsubmit = calculate;
    
} // End of init() function.

window.onload = init;

 

Paycheck2(1).pdf

Link to comment
Share on other sites

  • 1 month later...

Hi HartleySan thanks for replying to my post. I have been recently updating my code and it seems like I got some things to work but there are other parts of the assignment I'm still having trouble with. You may have read in my previous post that I had trouble displaying the error message for when invalid values were entered, I updated my code so now whenever I type an invalid value my paycheck calculator displays the error message like it should. I also found it helpful to create my if then else statement after declaring my variables. Where I'm having trouble now is in Step 3 f where the assignment asks me to create an if then else statement to determine regularHours and overtimeHours wherein Hours Worked over 40 are Overtime Hours and Hours Worked between 0 and 40 are Regular Hours. In addition to this when I press the submit button on my calculator the form values for grossPay, totalTaxes, and netPay all display NaN. I have posted my code down below, I believe the reason my code isn't working is because there might be a syntax error or logical error in my if then else statement and if that's the case I may need to figure out how to rewrite my if then else statement. Thank you once again for responding to my post and any help is appreciated. 

 

function calculate() {
    
    'use strict';
    
    var regularPay
    
    var overtimePay
    
    var hoursWorked = document.getElementById('hoursWorked').value;    
    
    var regularHours = document.getElementById('regularHours').value;
    
    var overtimeHours = document.getElementById('overtimeHours').value;
    
    var hourlyRate = document.getElementById('hourlyRate').value;
    
    var ficaTax = document.getElementById('ficaTax').value;
    
    var stateTax = document.getElementById('stateTax').value;
    
    var federalTax = document.getElementById('federalTax').value;
    
    var grossPay = document.getElementById ('grossPay').value = parseFloat(+regularPay+ +overtimePay).toFixed(2);
    
    var totalTaxes = document.getElementById ('totalTaxes').value = parseFloat(+ficaTax+ +stateTax+ +federalTax)* grossPay /100 .toFixed(2);
    
    var netPay = document.getElementById ('netPay').value = parseFloat(grossPay-totalTaxes).toFixed(2);
    
    
    
    var employeeName;
    
    var firstName = document.getElementById('firstName').value;
    
    var lastName = document.getElementById('lastName').value;
    
    employeeName = firstName + ' ' + lastName;
    
    document.getElementById('employeeName').value = employeeName;
    
    if ( (hoursWorked >= 0 && hoursWorked <= 80 && hourlyRate >= 0 && hourlyRate <= 100) ) {
        
         } else { // Show an error:
        
          alert('Please enter valid hours and a valid payrate!');  

          }
              
         if ( (hoursWorked > 40) ) {
        document.getElementById('overtimePay').value = parseFloat(overtimeHours*(hourlyRate*1.5)).toFixed(2);
        
        // display overtimeHours:
        
       } else if ( (hoursWorked >= 0 && hoursWorked <= 40) ) document.getElementById('regularPay').value = parseFloat(regularHours*hourlyRate).toFixed(2); {
            
               // display regularHours:
       
       return false;    
      
      } // end of else
        
        
    
} // End of function.

function init() {
    
    'use strict';
    
    document.getElementById('form1').onsubmit = calculate;
    
} // End of init() function.

window.onload = init;

 

Link to comment
Share on other sites

John, we talked about this in your last post, but you cannot do mathematical addition on strings. Whenever you do .value on a DOM form input, you are going to get a string back, even if it looks like a number. That will always be the case. And when you start trying to do fancy math with strings, you'll almost always end up with NaN (or not-a-number).

NaN is not a syntax error, that's a logic error in that you're trying to do number math with strings. Please fix that problem and you should be okay.

Link to comment
Share on other sites

  • 2 weeks later...

Hi HartleySan, I have been working on this problem and I'm still having trouble. I read your last message about getting NaN when you do number math with strings and what I've been doing so far is trying to convert parts of my if then else statements to strings like regularPay, overtimePay without using number math but I still can't get regualrPay, overtimePay, and the other form values to display correctly when I submit the form. Currently the assignment wants me to use an If statement to test Hours Worked to calculate regularHours and overtimeHours and regularPay and overtimePay. All hours worked over 40 are considered Overtime Hours while hours worked between 0 and 40 are considered regular hours. As with the previous assignment, regularPay is calculated as regularHours worked * hourlypayRate. overtimePay is calculate as overtimeHours * hourlyRate * 1.5. All of the remaining grossPay, totalTaxes, and netPay variables are calculated as with the previous assignment. Lastly I'd appreciate it if you showed me an example of creating a string without number math, my code is posted down below and I appreciate any help on helping solve this problem.

 

function calculate() {
    
    'use strict';
    
    var regularPay = parseFloat(regularHours*hourlyRate).toFixed(2);
    
    var overtimePay = parseFloat(overtimeHours*(hourlyRate*1.5)).toFixed(2);
    
    var hoursWorked = document.getElementById('hoursWorked').value;    
    
    var regularHours = document.getElementById('regularHours').value;
    
    var overtimeHours = document.getElementById('overtimeHours').value;
    
    var hourlyRate = document.getElementById('hourlyRate').value;
    
    var ficaTax = document.getElementById('ficaTax').value;
    
    var stateTax = document.getElementById('stateTax').value;
    
    var federalTax = document.getElementById('federalTax').value;
    
    var grossPay = document.getElementById ('grossPay').value = parseFloat(+regularPay+ +overtimePay).toFixed(2);
    
    var totalTaxes = document.getElementById ('totalTaxes').value = parseFloat(+ficaTax+ +stateTax+ +federalTax)* grossPay /100 .toFixed(2);
    
    var netPay = document.getElementById ('netPay').value = parseFloat(grossPay-totalTaxes).toFixed(2);
    
    
    
    var employeeName;
    
    var firstName = document.getElementById('firstName').value;
    
    var lastName = document.getElementById('lastName').value;
    
    employeeName = firstName + ' ' + lastName;
    
    document.getElementById('employeeName').value = employeeName;
    
    if ( (hoursWorked >= 0 && hoursWorked <= 80 && hourlyRate >= 0 && hourlyRate <= 100) ) {
        
         } else { // Show an error:
        
          alert('Please enter valid hours and a valid payrate!');  

          }
              
         if ( (hoursWorked >= 40) ) {
        document.getElementById('overtimeHours').value;
        
        // display overtimeHours:
        
       } else if ( (hoursWorked >= 0 && hoursWorked <= 40) ) document.getElementById('regularHours').value; {
            
               // display regularHours:
       
       return false;    
      
      } // end of else
        
        
    
} // End of function.

function init() {
    
    'use strict';
    
    document.getElementById('form1').onsubmit = calculate;
    
} // End of init() function.

window.onload = init;

 

Link to comment
Share on other sites

At least a part of the problem is you're referring to variables in the wrong order. For example, one of the first lines in your function is: 

var regularPay = parseFloat(regularHours*hourlyRate).toFixed(2);

But neither regularHours nor hourlyRate has a value at this point. I would recommend two approaches here instead:

1. Start with the smallest concept first.

2. Create comments describing the logic and then implement the logic in code. 

For example...

# See if hours worked is greater than 40

which becomes

# Get a reference to the number of hours worked

# See if hours worked is greater than 40

which becomes

var hoursWorked = document.getElementById('hoursWorked').value;  
hoursWorked = hoursWorked.toFixed(2);
if (hoursWorked > 40) {
  alert ('Greater than 40!');
}

and so on. (You can also use console.log() to output values and results to the console.)

By doing this more incrementally you can build up a working model while better understanding what's going on and the use of comments should help you avoid getting too far ahead of yourself. 

Link to comment
Share on other sites

 Share

×
×
  • Create New...