CODEWITHSUNDEEP
javascriptjqueryhtmlfunctionvariables
Phil Mulkins
Phil Mulkins

Reputation: 186

Why is this simple function not working

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

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>

Upvotes: 0

Views: 540

Answers (3)

frenchie
frenchie

Reputation: 51937

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); });

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.

Upvotes: 3

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48610

I would try this 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>

Upvotes: 1

Mark Micallef
Mark Micallef

Reputation: 2798

I may be stating the obvious here, but the first function (updateTotal) is missing the closing brace. If you copied and pasted from your source then this might be your issue. Easy to overlook when you're staring at it ;-)

Upvotes: 1

Related Questions