JS variable returning NaN

4

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 a NaN, does anyone know why?

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

Then, in JS, I add:

<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>
    
asked by anonymous 04.10.2017 / 13:59

3 answers

2

As Sergio commented, if your HTML is static then the best solution is to make the sum by PHP .

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

  

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

     

If the first character can not be converted to a number, parseFloat returns NaN

See the example below, I added a IF to avoid the 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>
    
04.10.2017 / 14:49
0

Thank you guys, I was able to resolve a position in length, since JS was adding the contents of the last td that was blank. The correct code looks 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>
    
04.10.2017 / 15:09
0

To detect the occurrence of a NaN (Not a number) you must use the Number.isNaN function by 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
    
04.10.2017 / 17:13