javascript - 为什么这个简单的功能不起作用

Question

为什么这不起作用？类似的代码在这里工作:http://www.ralphphillips.com/youtube/stick-figure/stick-figure2.html

但这行不通。我有正确的html代码。 ID 已设置，但每个 ID 不同。它甚至没有给出 0 的输出来指示总计为 0。没有显示任何值。

<!-----SAMPLE INPUT ---->
<input type="radio" autocomplete="off" id="pack11049" name="radio-73" value="1"     
onkeyup="updateTotal()">


<script language="javascript">
function updateTotal() {

 var optionsPrice = 0;
 var accompPrice = 0;

function checkOptions() {       
if (document.getElementById('pack11049').checked) {
    optionsPrice += 1049;
    }

if (document.getElementById('pack21199').checked) {
    optionsPrice += 1199;
    }

if (document.getElementById('pack31199').checked) {
    optionsPrice += 1199;
    }

if (document.getElementById('pack41299').checked) {
    optionsPrice += 1299;
    }
if (document.getElementById('pack61499').checked) {
    optionsPrice += 1499;
    }
if (document.getElementById('pack71549').checked) {
    optionsPrice += 1549;
    }
if (document.getElementById('pack81699').checked) {
    optionsPrice += 1699;
    }
if (document.getElementById('pack91799').checked) {
    optionsPrice += 1799;
    }
if (document.getElementById('pack101999').checked) {
    optionsPrice += 1999;
    }
if (document.getElementById('pack112499').checked) {
    optionsPrice += 2499;
    }
if (document.getElementById('pack122549').checked) {
    optionsPrice += 2549;
    }
} // end of checking for Package


function checkAccomp() {

if (document.getElementById('howmany').value == '1') {
    accompPrice += 129;
    }

if (document.getElementById('howmany').value == '2') {
    accompPrice += 258;
    }

if (document.getElementById('howmany').value == '3') {
    accompPrice += 1057;
    }   

if (document.getElementById('howmany').value == '4') {
    accompPrice += 1856;
    }   

} // end of check accomp function

 checkPackage();
 checkAccomp();

 var totalPrice = optionsPrice + accompPrice;
 document.getElementById('optionsPrice').innerHTML = "$ " + optionsPrice;
 document.getElementById('accompPrice').innerHTML = "$ " + accompPrice;
 document.getElementById('totalPrice').innerHTML = "$ " + totalPrice;


 } // end of my main update total function
 </script>

Answer 1

我会重写 checkOptions 和 checkAccomp 函数，并使用以下模式删除所有这些 if 语句:创建一个存储 id 的对象每个复选框及其对应的价格，然后使用带有键值查找的 for-in 循环，如下所示:

var OptionPricing = {     

    'pack11049': 1049,
    'pack21199': 1199,
    'pack31199': 1199,
    'pack41299': 1299,
    'pack61499': 1499
};

var AccompPricing = {

    0: 0,
    1: 129,
    2: 258,
    3: 1057,
    4: 1856 
};

function checkOptions() {

    var Price = 0;

    for (Packs in OptionPricing) {

        if ($('#' + Packs).is(':checked')) {           
            Price += OptionPricing[Packs];
        }
    }

    return Price;
}

function checkAccomp() {

    var Accomp = parseInt($('#HowMany').val(), 10);

    return AccompPricing[Accomp];
}

function updateTotal() {

    var ThePrice = checkOptions() + checkAccomp();

    $('#TotalPrice').text(ThePrice);
}

$(function () { $('.DoPricing').click(updateTotal); });

这是工作 jsFiddle . 我没有将所有 ID 和相应的价格添加到 OptionPricing 对象，但您明白了。此外，如果价格发生变化，或者如果添加了新价格，这种模式应该更容易维护，更不用说代码大大减少到只有几行(如果你喜欢简洁的语法，甚至可以进一步减少) ).我使用了 jQuery(问题中有标签)，但您可以轻松修改它并在需要时使用纯 js。