js not working on IE but working on FF.....giving inner.html error..so want to convert in jquery format

Question

Why this javascript working fine in Firefox but not in IE 6 and 7 ( haven't checked on IE8)?

giving inner.html error. Can any jquery expert convert this whole code into jquery? as i'm already using jquery on same site for other things.

function twoDecPlaces(theValue) {
var nm = new Number( Math.round( theValue * 100 ) ) /100 ;
 var parts = nm.toString().split( '.' );
 var ord = new Number( parts[ 0 ] );
 var dec = ( parts[ 1 ] ) ? parts[ 1 ] : '';
 if( dec ){
  dec = dec.toString().substring( 0, 2 );
  ord += '.' + dec;
 }

 return( ord );

}

function fourDecPlaces(theValue) {
num = theValue;
result = num.toFixed(4); 

 return( result );

}

function isNumber(val)
{
 if (isNaN(val))
 {
  return false;
 }
 if (val==0)
 {
  return false;
 }
 else
 {
  return true;
 } 
}


function doCalc()
{
 if (isNumber(document.getElementById("num_shares").value))
 {
  var dividend_rate = document.getElementById('dividend_rate');
  var currency = document.getElementById('currency').value;
  var dividendValue = dividend_rate.options[dividend_rate.selectedIndex].value;
  var num_shares = document.getElementById('num_shares');

  num_shares = parseInt(num_shares.value);

  var totalDividend = dividendValue * num_shares;
  var valuePaid = document.getElementById('valuePaid');
  var divpershare = document.getElementById('divpershare');

  divpersharevalue = fourDecPlaces(dividendValue/1000);
  divpersharevalue = divpersharevalue + " " + currency;

  totalDividend = twoDecPlaces(totalDividend/100);
  totalDividend = totalDividend + " " + currency;

     valuePaid.style.display="";
  divpershare.style.display="";
  valuePaid.innerHTML = "<td>The total dividend paid was:</td><td align='right'>"+totalDividend+"</td>";
  divpershare.innerHTML = "<td>The dividend per share was:</td><td align='right'>"+divpersharevalue+"</td>";
 }
else
 {
  alert("Invalid entry in dividend box");
  document.getElementById("num_shares").value="";
  document.getElementById('valuePaid').innerHTML=""; 
 }
}

Can any jquery expert convert this whole code into jquery?

Answer 1

Internet Explorer is very bad at editing the innerHTML of table, thead, tbody, and tr elements.

Either use standard DOM, replace the entire table, or replace the contents of indivdual cells.

Answer 2

Here are some things I noticed:

• I'm not sure why you are using two different methods, one fortwoDecPlaces and another for the fourDecPlaces function.
• You shouldn't need to insert table cells with data to display results. I would just have the text in place in the table (but hidden), so then you only need to update the value.

This is how I would modify the result table (CSS included):

<style type="text/css">
.text, .val { display: none; }
</style>
<table>
<tr id="valuePaid"><td class="text">The total dividend paid was:</td><td class="val"></td></tr>
<tr id="divpershare"><td class="text">The dividend per share was:</td><td class="val"></td></tr>
</table>

And this would be your script made to work with the above HTMl. It's been cleaned up and jQuerified :)

function twoDecPlaces(theValue) {
 return theValue.toFixed(2);
}
function fourDecPlaces(theValue) {
 return theValue.toFixed(4);
}
function isNumber(val) {
 if (isNaN(val) || val == 0) { return false; }
 return true;
}
function doCalc(){
 if (isNumber($('#num_shares').val())) {
  var currency = $('#currency').val();
  var dividendValue = $('#dividend_rate').val();
  var num_shares = parseInt($('#num_shares').val(),10);
  var divpersharevalue = fourDecPlaces(dividendValue/1000) + " " + currency;
  var totalDividend = twoDecPlaces((dividendValue * num_shares)/100) + " " + currency;
  $('#valuePaid').find('.val').html(totalDividend);
  $('#divpershare').find('.val').html(divpersharevalue);
  $('.text, .val').show();
 } else {
  alert("Invalid entry in dividend box");
  $('#num_shares').val('');
  $('.text').hide();
  $('.val').empty();
 }
}

If you want to limit the input box to only allow numbers to be typed inside of it, there are several jQuery plugins available. Here is one called Numeric.