Script not working in IE

Question

I have the following script where I calculate a price based on user input radio buttons and output it into a section of html. The script is not working in internet explorer properly. It works in FF, Chrome, etc. The script is supposed to take an input from a radio button and then based on the input it will output a different price. It is not outputting a price in IE.

var newprice = "";        

function CalcPrice(){
    // I take the input from the radio buttons here 
    var goals = $("#menu input[type='radio']:checked").val();

    if (goals=="Weight Loss"){
        newprice="45";
    } else {
        newprice="55";
    }

    $('.pricetotal').html("$"+newprice.toFixed(2));
}

HTML

<form class= "meal-table" id="meal-radio" onsubmit="return false">
          <fieldset id="menu">
         <input type="radio" id="radio01" name="menu" value="Weight Loss" />
         <input type="radio" id="radio02" name="menu" value= "Performance"/>
          </fieldset>
    <div>
      <div class="meal-plan-btn">
        <button id="mealbtn" onclick="CalcPrice()">Add To Cart</button>
  </div>
</div>
 </form>

// this is where the price will be injected

          <div class="pricebox" id="priceboxmobile">
            <div class="pricetotal" >
              <span ></span>
            </div></div>

Answer 1

I think if you change

$('.pricetotal').html("$"+newprice.toFixed(2));

to

$('.pricetotal span').html("$"+newprice.toFixed(2));

it will be fixed.

IE is a stickler for those kind of things.
But in this case it's what you want anyway, otherwise your span will be removed.
Alternatively, remove the span altogether..

Answer 2

Changing this line

 $('.pricetotal').html("$"+newprice.toFixed(2));

To:

 $('.pricetotal').empty().html("$"+newprice.toFixed(2));

Seems to work, anyone know why?