为什么这个简单的功能不起作用 [英] Why is this simple function not working

问题描述

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

Why isn't this working? Similar code works here: http://www.ralphphillips.com/youtube/stick-figure/stick-figure2.html

但这不起作用。我有正确的HTML代码。 ID的设置，但每个ID不同。它甚至没有给出0的输出来指示总和为0.没有值出现。

But this isn't working. I have the html code correct. ID's are set but different Id's for each. It doesn't even give an output of 0 to indicate total is 0. No values show up.

<!-----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>

推荐答案

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

I would rewrite the checkOptions and checkAccomp functions and remove all these if statements using this pattern: create an object that stores the id of each checkbox and its corresponding price, and then use a for-in loop with key value lookup, like this:

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。

Here's the working jsFiddle. I didn't add all the ids and corresponding prices to the OptionPricing object but you get the idea. Also, if the prices change, or if new prices are added, this pattern should be easier to maintain, not to mention that the code is considerably reduced to just a few lines (and could even be reduced a bit further if you like terse syntax). I used jQuery (you had the tag in the question) but you could easily modify it and use plain js if needed.

这篇关于为什么这个简单的功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！