JS variable returning Nan

Question

I’m assigning the sum of a column in an HTML table to a JS (sum) variable, but when I print it on the screen I get an Nan, someone knows why?

<tr>
  <td style="background:#c4ffd6;" align="center" class="qtd_recuperado">
        <?php echo "$recuperado_total"; ?>
  </td>
</tr>

Then, in JS, I add up:

<script type="text/javascript">
     function sumQuantity() {

       var elements = document.getElementsByClassName('qtd_recuperado');
       var sum = 0;



       for (i=0;i< elements.length;i++) {
         sum = sum + parseFloat(elements[i].innerHTML);
       };

      document.getElementById('resultado').innerHTML = sum;
      }

       sumQuantity();
  </script>

So I try to print, like this:

<td style="background:#c4ffd6;" align="center" class="qtd_recuperado" id="resultado"></td>

Answer 1

Like the Sergio commented, whether his HTML is static so the best solution is to make the sum by PHP.

Now see that the problem in your solution with javascript occurs due to the contents of your column, understand the function parseFloat:

parseFloat parses a string argument, and returns a number of floating point. If it finds a character other than a signal (+ or -), numeral (0-9), a decimal point, or an exponent, it returns the value up to this point and ignores this character and all following characters. Right and left spaces are allowed.

If the first character cannot be converted to a number, parseFloat returns Nan

See the example below, I added a IF to avoid error.

function sumQuantity() {
  var elements= document.getElementsByClassName("qtd_recuperado");
  var sum = 0;
  var conteudo;
   
   for (i=0;i< elements.length;i++) {
     conteudo = elements[i].innerHTML;
     if(!isNaN(conteudo))
      sum += parseFloat(conteudo);
   };

document.getElementById('resultado').innerHTML = sum;
}

sumQuantity();

<table>
  <tr>
    <td style="background:#c4ffd6;" align="center" class="qtd_recuperado">
         112
    </td>
  </tr>
  <tr>
    <td style="background:#c4ffd6;" align="center" class="qtd_recuperado">
        10aa
    </td>
  </tr>
</table>
<div>
  <!-- conteudo: 11       -> retorna soma -->
  <!-- conteudo: 11Texto  -> retorna soma -->
  <!-- conteudo: Texto1   -> retorna NaN  -->
  <!-- conteudo: VAZIO    -> retorna NaN  -->
  Resultado: <span id="resultado"></span>
</div>

Answer 2

To detect the occurrence of an Nan (Not a number) you must use the function Number.isNaN passing the value.

var nan = 0 / 0;
var eNaN = Number.isNaN(nan); // eNaN vai ser true, pois zero sobre zero não é um número

var numero = parseInt("xpto");
if (Number.isNaN(numero))
    numero = 0; // zerando caso seja NaN

Answer 3

Thanks guys, I was able to resolve returning a position in length, since the JS was adding up the content of the last td that was blank. The correct code looked like this:

<script type="text/javascript">
     function sumQuantity() {

       var elements = document.getElementsByClassName('qtd_recuperado');
       var sum = 0;



       for (i=0;i< (elements.length)-1;i++) {
         sum = sum + parseFloat(elements[i].innerHTML);

       };
          document.getElementById('resultado').innerHTML=sum;
     }

       sumQuantity();
  </script>