为什么这不起作用?类似的代码在这里工作: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
函数,并使用以下模式删除所有这些 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。
关于javascript - 为什么这个简单的功能不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17076429/