Search code examples
javascriptjavascript-framework

Javascript bug in i.e function returning NAN (works in other browsers)

Hello i have created a javascript function that recaculates the grand total of an order when the delivery method is changed. The code works fine in firefox, chrome and i.e 9 but returns NAN in i.e 8 and 7, which i understand means Not a number.

I have tried using parseInt, pareseFloat and Number but can't understand why it does not work in i.e 6, 7 or 8

my code is as follows 

<script type="text/javascript">
function ChangePrice(a)
{
    // grabs the delivery price of the selected option i.e 10.99
    var price = parseFloat(a);

    // grab delivery price which is currently on screen i.e 4.99
    old_price = document.getElementById('delivery-sidebar').innerHTML;
    // removing the span tags around the function which are not needed
    old_price = old_price.replace('<SPAN class=price>','');
    old_price = old_price.replace('</SPAN>','');


    //grab subtotal price (which does not include delivery) which is currently on screen  i.e 34.99    
    var subtotal = document.getElementById('overall').innerHTML;
     // removing the span tags around the function which are not needed
    subtotal = subtotal.replace('<span class="price">','');
    subtotal = subtotal.replace('</span>','');
    subtotal = subtotal.replace('£','');

    // converting subtotal to float 
    subtotal=parseFloat(subtotal);

    // if the price of the delivery does not match the price currently on screen
    if (price != old_price)
        {
      //add new price against subtotal 
      var overall_total = (parseFloat(subtotal))+(parseFloat(price));
            // round result to two decimal places i.e 10.99
            overall_total=roundNumber(overall_total,2);
            // update values on screen 
            document.getElementById('delivery-sidebar').innerHTML = '<span class="price">£'+price.toFixed(2)+'</span>';
            document.getElementById('grand-price').innerHTML = '<span class="price">£'+overall_total.toFixed(2)+'</span>';
        }
}
function roundNumber(num, dec) {
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
return result;
}

</script>

and the markup 

    <ul>
      <li>
         <input name="shipping_method" value="tablerate_bestway" id="s_method_tablerate_bestway" checked="checked" class="radio validation-passed" onclick="ChangePrice('0')" type="radio">

<label for="s_method_tablerate_bestway">UK Delivery (3 - 7 Working Days) </label>         
<span class="price">Free delivery</span>                                                
     </li>
    </ul>
    <dd>
      <ul>
          <li>
            <input name="shipping_method" value="flatrate_flatrate" id="s_method_flatrate_flatrate" class="radio validation-passed" onclick="ChangePrice('10')" type="radio">
             <label for="s_method_flatrate_flatrate">Next Day - Orders Before 2pm </label>
             <span class="price"><span class="price">£10.00</span></span>                                                
             </li>
     </ul>
   </dd>
Solution

  • You can never rely on reading back the same HTML that the page was created with.

    If you read back <SPAN class="price"> in IE you will actually get <SPAN class=price> (sans ") so your replace fails and the parse to a numeric returns NaN.

    You can either choose to rely on .replace('<SPAN class=price>','i') or better give the span an id: <SPAN id="totalprice" class="price">£xxx</span> and get the numeric value from its innerHTML, or even better retain all the numeric values in memory in the first place.