计算结果未显示在总计表中

Question

I'm trying to create a paycheck calculator, but when I enter the hourly rate and number of hours and hit calculate, all I'm getting is undefined in my totals table. Here is my javascript:

var $ = function (id) {
return document.getElementById(id); 
}

function updateTotal () {

var rate;
var hours = parseFloat( $("numHours").value);
var regularHours;
var overtime;
var doubletime;

    //begin determine hourly rate 
    function checkJob () {
    if ($('job').value == 'job0') {
    rate = 0;
    }
    if ($('job').value == 'job1') {
    rate = 12;
    }
    if ($('job').value == 'job2') {
    rate = 10;
    }
    if ($('job').value == 'job3') {
    rate = 11;
    }
    }

    //calculate hours breakdown
    function checkHours () {
    if (hours.value <= 40) {
    regularHours = hours.value;
    overtime = 0;
    doubletime = 0;
    }

    if (hours.value < 60) {
    regularHours = 40;
    overtime = hours.value-40;
    doubletime=0;
    }

    if (hours.value >=60) {
    regularHours = 40;
    overtime = 20;
    doubletime = hours.value-60;
    }
    }

    checkJob();
    checkHours();

    var salary = (regularHours * rate) + (overtime * (rate * 1.5)) + (doubletime * (rate * 2))



    //display amounts
    $('regularHours').innerHTML = regularHours;
    $('overtime').innerHTML = overtime;
    $('doubletime').innerHTML = doubletime;
    $('salary').innerHTML = "$ " + salary;
}

I'm sure I'm missing something silly, but I've been staring at this code for days and can't figure out what I'm doing wrong. Thanks for looking!

Answer 1

EDIT

The offending code is this:

hours.value

The problem with it is that hours is already a number, and number does not have the method value available to it. Changing all instances of hours.value to hours will solve the problem and properly output a calculated result.

See this demo: http://jsfiddle.net/gLthv/

---

The problem is the way you are implementing your jquery selectors. You should either use document.getElementById() instead, or remember that to select an id, you need to prefix the id name with a #

 
 
 
  
  $("#id")
 
  

That is only the first part of the problem though. The next part is that you are using jquery, but expecting dom elements. To unwrap the jquery object, you need to use [0] with it to be able to access the contained dom element.

 
 
 
  
  $("#id")[0]
 
  

Once you make these changes, you should be able to see the reflected calculations. For example, $('job').value should really be $('#job')[0].value or if you prefer to stick with jquery's implementation then you can use $('#job').val() to get the value.

Similar to this you may also access jquery's implementation of innerHTML . That would change this: $('overtime').innerHTML = overtime to $('#overtime').html(overtime)