Question

我正在尝试创建一个薪水计算器，但是当我输入每小时费率和小时数并点击计算时，我所得到的只是 undefined 在我的总计表中。这是我的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;
}

我确定我错过了一些愚蠢的东西，但我已经盯着这段代码好几天了，无法弄清楚我做错了什么。谢谢你的期待！

Answer 1

修改

违规代码是：

hours.value

问题在于hours已经是一个数字，并且数字没有可用的方法value。将hours.value的所有实例更改为hours将解决问题并正确输出计算结果。

请参阅此演示：http://jsfiddle.net/gLthv/

~~问题在于您实现jquery选择器的方式。您应该使用document.getElementById()代替，或者记住要选择ID，您需要在ID名称前加上#~~

$("#id")

这只是问题的第一部分。接下来的部分是你正在使用jquery，但期待dom元素。要打开jquery对象，需要使用[0]来访问包含的dom元素。

$("#id")[0]

进行这些更改后，您应该能够看到反映的计算结果。例如，$('job').value应该是$('#job')[0].value，或者如果您更喜欢使用jquery的实现，那么您可以使用$('#job').val()来获取值。

~~与此类似，您也可以访问jquery的innerHTML实现。这会改变这一点：$('overtime').innerHTML = overtime到$('#overtime').html(overtime)~~

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

1 个答案: