'Cant work out bug with my Javascript code
I can't get the total price to show up on the screen. I am sure this is just a small bug somewhere but I can't find it.
var cabbage_prices = new Array();
cabbage_prices["Round6"]=20;
cabbage_prices["Round8"]=25;
cabbage_prices["Round10"]=35;
cabbage_prices["Round12"]=75;
var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=5;
filling_prices["Custard"]=5;
filling_prices["Fudge"]=7;
filling_prices["Mocha"]=8;
filling_prices["Raspberry"]=10;
filling_prices["Pineapple"]=5;
filling_prices["Dobash"]=9;
filling_prices["Mint"]=5;
filling_prices["Cherry"]=5;
filling_prices["Apricot"]=8;
filling_prices["Buttercream"]=7;
filling_prices["Chocolate Mousse"]=12;
function getCabbageSizePrice()
{
var cabbageSizePrice=0;
var theForm = document.forms["cabbageForm"];
var selectedCabbage = theForm.elements["selectedcabbage"];
for(var i = 0; i < selectedCabbage.length; i++)
{
if(selectedCabbage[i].checked)
{
cabbageSizePrice = cabbage_prices[selectedCabbage[i].value];
break;
}
}
return cabbageSizePrice;
}
function getFillingPrice()
{
var cabbageFillingPrice=0;
var theForm = document.forms["cabbageform"];
var selectedFilling = theForm.elements["filling"];
cabbageFillingPrice = filling_prices[selectedFilling.value];
return cabbageFillingPrice;
}
function calculateTotal()
{
var cabbagePrice = getCabbageSizePrice() + getFillingPrice();
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cabbage $"+cabbagePrice;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
<div id="wrap">
<form action="" id="cabbageform" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<legend>Order Your Cabbages</legend>
<label >Size of your Cabbage</label>
<label class='radiolabel'><input type="radio" name="selectedcabbage" value="Round6" onclick="calculateTotal()" />Round Cabbage 6" - serves 3 people ($20)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcabbage" value="Round8" onclick="calculateTotal()" />Round Cabbage 8" - serves 5 people ($25)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcabbage" value="Round10" onclick="calculateTotal()" />Round Cabbage 10" - serves 10 people($35)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcabbage" value="Round12" onclick="calculateTotal()" />Round Cabbage 12" - serves 15 people($75)</label><br/>
<br/>
<label >Cabbage Filling</label>
<select id="filling" name='filling' onchange="calculateTotal()">
<option value="None">Select Filling</option>
<option value="Lemon">Lemon Sauce($5)</option>
<option value="Custard">Custard Sauce($5)</option>
<option value="Fudge">Fudge Sauce($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
<option value="Pineapple">Pineapple($5)</option>
<option value="Dobash">Dobash($9)</option>
<option value="Mint">Mint($5)</option>
<option value="Cherry">Cherry($5)</option>
<option value="Apricot">Apricot($8)</option>
<option value="Buttercream">Buttercream($7)</option>
<option value="Chocolate Mousse">Chocolate Mousse($12)</option>
</select>
<br/>
</fieldset>
</div>
<div class="cont_details">
<fieldset>
<legend>Contact Details</legend>
<label for='name'>Name</label>
<input type="text" id="name" name='name' />
<br/>
<label for='address'>Address</label>
<input type="text" id="address" name='address' />
<br/>
<label for='phonenumber'>Phone Number</label>
<input type="text" id="phonenumber" name='phonenumber'/>
<br/>
</fieldset>
</div>
<input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
</div>
</form>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
