无法获得总费用

时间:2015-02-03 22:59:43

标签: javascript jquery html forms

所以我有一个有两个下拉菜单的表格。第一个下拉列表是选项,另一个是更多选项。所以它就像混合搭配,现在我想从两个选定的下拉列表中计算总数。这就是我的目标

var repairCost = new Array();
    repairCost["none_repair"] = 0;
    repairCost["minor"] = 10;
    repairCost["major"] = 20;
    repairCost["extreme"] = 30;

    var colorCost = new Array();
    colorCost["none_color"] = 0;
    colorCost["single_portrait"] = 10;
    colorCost["group_scene"] = 20;

    $("#repair_drop").change(function (event) {
        getRepair();
        function getRepair(){
            var repair = 0;

            var form = document.forms["myform"];
            var selectedRepair = form.elements["repair_drop"];
            repair = repairCost[selectedRepair.value];

            return repair
        }
    });

    $("#colorize_drop").change(function (event) {
    getColor();
    function getColor(){
            var color = 0;

            var form = document.forms["myform"];
            var selectedColor = form.elements["colorize_drop"];
            color = colorCost[selectedColor.value];

            return color
        }
    });
    var timer1 = null;
    clearTimeout(timer1); 
    timer1 = setTimeout(total, 500)

    function total(){
        var cost = getRepair() + getColor();
        console.log(cost);
    }
    total();

我最终得到了

  

未捕获的ReferenceError:未定义getRepair

例如,我选择repairCost["minor"]colorCost["group_scene"],然后我的结果将是$30。我有一个计时器,所以它自动计算总数。有什么想法吗?

2 个答案:

答案 0 :(得分:1)

为什么要在事件中声明函数,然后从那里调用它们?要么在事件之外声明它们,要么只是内联代码 - 不要两者兼顾。

答案 1 :(得分:1)

您在另一个函数中定义了getRepair函数。因此,您无法从外部访问它。您必须在函数外部定义它才能访问它,如下所示:

var repairCost = new Array();
repairCost["none_repair"] = 0;
repairCost["minor"] = 10;
repairCost["major"] = 20;
repairCost["extreme"] = 30;

var colorCost = new Array();
colorCost["none_color"] = 0;
colorCost["single_portrait"] = 10;
colorCost["group_scene"] = 20;

function getRepair(){
    var repair = 0;

    var form = document.forms["myform"];
    var selectedRepair = form.elements["repair_drop"];
    repair = repairCost[selectedRepair.value];

    return repair;
}

function getColor(){
    var color = 0;

    var form = document.forms["myform"];
    var selectedColor = form.elements["colorize_drop"];
    color = colorCost[selectedColor.value];

    return color;
}

$("#repair_drop").change(function (event) {
    getRepair();

});

$("#colorize_drop").change(function (event) {
    getColor();
});

var timer1 = null;
clearTimeout(timer1); 
timer1 = setTimeout(total, 500)

function total(){
    var cost = getRepair() + getColor();
    console.log(cost);
}