为什么这个简单的功能不起作用答案

【问题标题】：Why is this simple function not working为什么这个简单的功能不起作用
【发布时间】：2013-06-09 05:03:16
【问题描述】：

为什么这不起作用？类似的代码在这里工作：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>

【问题讨论】：

checkOptions 和 checkAccomp 是在 updateTotal 中定义的开始
在什么情况下它不起作用？会发生什么？你预计会发生什么？
你真的要使用 onkeyup 事件吗？
@Phil Mulkins：未来的小提琴（jsfiddle.net）会很棒。
另外language 属性已被弃用，应替换为type="text/javascript" 或type="application/javascript。

标签： javascript jquery html function variables

【解决方案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。

【讨论】：

这更多是我需要的，因为值必须是唯一的，这样我才能在 php 处理页面上识别包。我将拥有多个具有相同价格的产品。这就像一个魅力！谢谢！
这很奇怪，我重新创建了您提供的整个脚本，它在 jsFiddle 上运行良好，但是当您在页面上选择某些内容时，它说总数是“NaN”，没有引号，只有 NaN ... . 有什么建议吗？
当我说页面时，我的意思是在我的 wordpress page.php 文件中。
等我发现问题了！ HowMany Options 表单输入值不是 1、2、3 4。我之前更改了它们。表格现在工作得很好！你是摇滚明星！再次感谢您！
如何在末尾添加一个美元符号和小数点以及两个零？总价：1493.00 美元或总价：1,493.00 美元（带逗号）？

【解决方案2】：

我会试试这个http://jsfiddle.net/EFWf5/1:

$("form#order :input[type=radio]").each(function(){
    $(this).bind('change', function() {
        checkOptions();
    });
});

var checkOptions = function () {
    var total = 0;
    var pack = parseInt($('input[name=pack]:checked', '#order').val());
    var accomp = parseInt($('input[name=accomp]:checked', '#order').val());
    if (!isNaN(pack)) total += pack;
    if (!isNaN(accomp)) total += accomp;
    $('#total').text(total);
    $('#title').text($('input[name=pack]:checked', '#order').attr('title'));
};

<form id="order">
    <div class="col">
        <strong>Package</strong><br /><hr />
        <input type="radio" name="pack" value="1049" />Pack 1<br />
        <input type="radio" name="pack" value="1199" title="MVP Package"/>Pack 2<br />
        <input type="radio" name="pack" value="1199" title="Oceanview" />Pack 3<br />
        <input type="radio" name="pack" value="1299" />Pack 4<br />
        <input type="radio" name="pack" value="1499" />Pack 5</div>
    <div class="col">
        <strong>Accomp</strong><br /><hr />
        <input type="radio" name="accomp" value="129" />1<br />
        <input type="radio" name="accomp" value="258" />2<br />
        <input type="radio" name="accomp" value="1057" />3<br />
        <input type="radio" name="accomp" value="1856" />4
    </div>
</form>
<div class="clear"></div>
<hr id="bar" />
<div class="clear"></div>
<div>
    <div class="col">
        <strong>Total: </strong><span id="total">0</span>
    </div>
    <div class="col" style="width:200px">
       <strong>Title: </strong><span id="title"></span> 
    </div>
</div>

【讨论】：

效果很好！我会试试这个！谢谢！
好的，这是我在使用这个 javascript 时遇到的 1 个问题。它工作得很好，但我不能让任何单选按钮上的值都相同，因为会有多个相同的价格，我使用该值来识别每个包裹，这样我就可以重写价格处理页面。换句话说，如果 (Pack == 1 then pack 1 = 1099 & pack title = MVP Package Price $1099) if (pack == 2 then pack = 1099 & pack title = Oceanview Price $1099)
如果 1099 是唯一的指示符，我将如何在包之间进行识别？
单选按钮名称区分组。价值不是指标。
如果这对您有所帮助，请随时按向上箭头。谢谢。

【解决方案3】：

我可能会在这里说明显而易见的事情，但第一个函数 (updateTotal) 缺少右括号。如果您从源复制并粘贴，那么这可能是您的问题。当你盯着它看时很容易忽略它;-)

【讨论】：