Radio box price calculator. Total price incorrect, help please :)

Thanks for taking a look, its a pretty simple problem, and I'm looking for help as this is my first attempt at javascript. The idea is to calculate the total price of a package, ie choose pack 1, the price automatically shows 5.95, add an extra option 4 is added showing 9.95.
Sorry for it looking a mess.

<script type="text/javascript">var pack1 = 5.95;var pack2 = 9.95;var pack3 = 13.95;var pack4 = 17.95;var dom = 4;function CalculatePrice(){    var totalprice = 0;    if (document.getElementById('option1').value == "1")   {        totalprice += pack1;    }	if (document.getElementById('option1').value == "2")   {        totalprice += pack2;    }	if (document.getElementById('option1').value == "3")   {        totalprice += pack3;    }	if (document.getElementById('option1').value == "4")   {        totalprice += pack4;    }    if (document.getElementById('option2').value == "1")    {        totalprice += dom;    }    document.getElementById('pricesum').innerHTML = totalprice;}
</script><input name="option1" id="option1" type="radio" value="1" onclick="CalculatePrice()"> Pack 1<br/><input name="option1" id="option1" type="radio" value="2" onclick="CalculatePrice()"> Pack 2<br/><input name="option1" id="option1" type="radio" value="3" onclick="CalculatePrice()"> Pack 3<br/><input name="option1" id="option1" type="radio" value="4" onclick="CalculatePrice()"> Pack 4<br/><br><input name="option2" id="option2" type="radio" value="1" onclick="CalculatePrice()"> Extra<br/><input name="option2" id="option2" type="radio" value="2" onclick="CalculatePrice()"> No Extra<br/><br>Total Price: $<span id="pricesum">0</span>

PHP:

 

I won't even waste my time trying to figure out what you are doing.

If you are too lazy and/or incompetent enough to format the code in some form of easily readable code, then I will assume that you have not thoroughly looked at your code, meaning that you PROBABLY have some error that YOU could find if your code was readable.

 

Thanks mmerlinn for the help, basically I am trying to create a price calculator based on people's radio box selection, ie pack 1 costs x, then if they choose an extra it costs y more, so displaying (and automatically updating) a price of x+y.
The code is formatted perfectly, though thanks to digitalpoints method of displaying, it looks a little messy, unless you copied it into dreamweaver then you see it is rather straight forward? It should be pretty easy to read, having played with it and trying to get it to work, I thought someone else might be able to help.

 

Code like this:

<script type="text/javascript">var pack1 = 5.95;var pack2 = 9.95;var pack3 = 13.95;var pack4 = 17.95;var dom = 4;function CalculatePrice(){    var totalprice = 0;    if (document.getElementById('option1').value == "1")   {        totalprice += pack1;    } if (document.getElementById('option1').value == "2")   {        totalprice += pack2;    }   if (document.getElementById('option1').value == "3")   {        totalprice += pack3;    }   if (document.getElementById('option1').value == "4")   {        totalprice += pack4;    }    if (document.getElementById('option2').value == "1")    {        totalprice += dom;    }    document.getElementById('pricesum').innerHTML = totalprice;}
</script>

Code (markup):

is VERY hard for a HUMAN to understand and read. Just because it works fine for DP and the web does NOT mean it is easily human-readable.

Formatting the same code:

<script type="text/javascript">

var pack1 = 5.95;
var pack2 = 9.95;
var pack3 = 13.95;
var pack4 = 17.95;
var dom = 4;

function CalculatePrice(){
    var totalprice = 0;

    if (document.getElementById('option1').value == "1") {
        totalprice += pack1;
    }

    if (document.getElementById('option1').value == "2") {
        totalprice += pack2;
    }

    if (document.getElementById('option1').value == "3") { 
        totalprice += pack3;
    }

    if (document.getElementById('option1').value == "4") {
        totalprice += pack4;
    }

    if (document.getElementById('option2').value == "1") {
        totalprice += dom;
    }

    document.getElementById('pricesum').innerHTML = totalprice;
}
</script>

Code (markup):

into HUMAN readable form makes it easier for YOU to understand and makes it easier for YOU to find any problems with it.

When you need help, do EVERYTHING POSSIBLE to make it as easy as possible for someone to help you. WE DON'T HAVE TIME TO WASTE REFORMATTING YOUR CODE SO IT IS EASY TO UNDERSTAND. We have better things to do in life rather than doing your job for you.

That said, I don't see what you are trying to accomplish here. It looks like the buyer can choose ONLY one of the four packs via option1 plus an optional purchase via option2. Is that what you are trying to accomplish?

 

Thanks for fixing it, in dreamweaver it looks fine, on copying it seems to change, I'll keep that in mind for next time. Cheers.
MMerlinn, thats correct, at the moment the calculation is incorrect and will only return the value of pack 1 plus the value of the option, and will not update on selecting different option.

 

Please clarify. Are you saying that if you have pack1 that it will not add say pack2 to pack1 (two choices) OR are you saying that if you have pack1 but want to change it to pack2 (1 choice) it will not discard pack1 and keep pack2?

 

The second part, initially the user will select a pack (out of the four) they wish to have, and then decide if they want the option.

 

I am assuming that the total is displayed properly after you call this function. I have no way of testing it, so I will assume that the results are posted.

The JS code looks like it will do exactly what you want it to do. Basically, every time you call it, it should update your total price to the new total based on which buttons are selected.

Therefore, I think there is something wrong in your HTML that calls the JS code.

 

Thank you for helping, the html code used to recall the pricing is as follows:

<p>
<input name="option1" id="option1" type="radio" value="1" onclick="CalculatePrice()">Pack 1<br/>
<input name="option1" id="option1" type="radio" value="2" onclick="CalculatePrice()"> Pack 2<br/>
<input name="option1" id="option1" type="radio" value="3" onclick="CalculatePrice()"> Pack 3<br/>
<input name="option1" id="option1" type="radio" value="4" onclick="CalculatePrice()"> Pack 4<br/>
<br>
<input name="option2" id="option2" type="radio" value="1" onclick="CalculatePrice()"> Extra<br/>
<input name="option2" id="option2" type="radio" value="2" onclick="CalculatePrice()"> No Extra<br/>
<br>Total Price: $<span id="pricesum">0</span>
</p>

Code (markup):

Learnt how to format, type code rather than php.

 

Nothing pops out to me.

Can you show an example page that I can click the buttons and see the results?