爲什麼這個簡單功能無法正常工作

爲什麼不能正常工作？類似的代碼在這裏工作：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>

來源

2013-06-12 Phil Mulkins

checkOptions和checkAccomp在updateTotal中定義的開始 – Niall

它以什麼方式不起作用？會發生什麼？你期望會發生什麼？ –

你真的想要使用onkeyup事件嗎？ –

我會重寫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。

來源

2013-06-13 03:10:41 frenchie

這是我需要的更多，因爲值必須是唯一的，所以我可以在php處理頁面上標識包。我將有不止一個具有相同的價格。這就像一個魅力！謝謝！ –

這很奇怪，我重新創建了您提供的整個腳本，它在jsFiddle上運行良好，但是當您在頁面上選擇某個內容時，它表示總數是「NaN」，沒有引號，只是NaN ....任何建議？ –

當我說Page時，我的意思是在我的wordpress page.php文件中。 –

我會嘗試這個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>

來源

2013-06-12 23:09:41

很好用！這個！謝謝！ –

好的這裏有1個問題，我用這個javascript。它工作的很好，但我不能有任何的單選按鈕相同的價值，因爲將有多個具有相同的價格和換句話說，如果（Pack == 1然後pack 1 = 1099＆pack title = MVP Package Price $ 1099）if（pack == 2然後pack = 1099＆pack title = Oceanview售價$ 1099） –

如果1099是唯一的指標，我將如何識別軟件包？ –

我可能在這裏說明了明顯，但第一個函數（updateTotal）缺少右大括號。如果您從源代碼複製並粘貼，那麼這可能是您的問題。當你盯着它時容易忽略;-)

來源

2013-06-13 05:41:07

爲什麼這個簡單功能無法正常工作

回答

相關問題