Let me lay down the scenario. I have three radio buttons and when the user clicks any 1 of them it displays a price beside it. Now this is all well and good if the user just clicks 1 and moves on but because it's writing in innerhtml when they change their option the price of the first click stays and the second then appears.

What I want is for the only one price to appear at a time, meaning it will have to clear any written innerhtml but I have no idea how you go around doing this.

So this is why I'm here I guess

My script:

<script type="text/javascript">
function addPrice(){
document.getElementById('pizzasize1').innerHTML = '4.50';

function addPrice2(){
document.getElementById('pizzasize2').innerHTML = '6.00';
function addPrice3(){
document.getElementById('pizzasize3').innerHTML = '7.50';

<p>Select the size, base and toppings for you pizza.</p>
<form id="orderpizza" action="" onSubmit="return false;">
<fieldset id="Size"> <legend class="formheading">Select the size of pizza</legend>
<br />
<input type="radio" name="selectedpizza" value="size10" onclick='addPrice()' /> 10" pizza base <span class="pricetext"><b id='pizzasize1'> </b></span> <br />
<br />
<input type="radio" name="selectedpizza" value="size12" onclick="addPrice2()" /> 12" pizza base <span class="pricetext"> <b id='pizzasize2'> </b> </span> <br />
<br />
<input type="radio" name="selectedpizza" value="size15" onclick="addPrice3()" /> 15" pizza base <span class="pricetext" id='pizzasize3'></span><br />
<br /><br /> </select>


I hope I haven't confused anyone.