Is it possible to add the td values using querySelectorAll?

Question

I wonder if it is possible to add the values contained within the td using querySelectorAll? And show the result of the sum in the span id="valor_total" as an example of the code below.

function somaTds() {
  var selecionados = [].slice.call(document.querySelectorAll('#tblEditavel vlr'));

  var total = selecionados.reduce(function(soma, el) {
    console.log(el.innerHTML);
    return soma + Number(el.value);
  }, 0);

  document.getElementById('valor_total').innerHTML = total.toLocaleString('pt-br', {
    minimumFractionDigits: 2,
    currency: 'BRL'
  });
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-condensed">
  <tr>
    <th>#</th>
    <th>Nome</th>
    <th>Valor</th>
  </tr>
  <tr>
    <td>3</td>
    <td>Casa</td>
    <td class="vlr">R$ 200,00</td>
  </tr>
  <tr>
    <td>89</td>
    <td>Loja</td>
    <td class="vlr">R$ 551,00</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td><span id="valor_total">somando...</span></td>
</table>
<button class="btn btn-primary" name="btnSoma" onclick="somaTds()">Somar</button>

by clicking the add button it returns a zeroed value.

Answer 1

Yes perfectly possible. Notice you had an error in the dial, missing one . in '#tblEditavel vlr', and #tblEditavel html. And if you’re not using input you need to use `innerHTML.

You could do it like this:

function somaTds() {
  var selecionados = [].slice.call(document.querySelectorAll('#tblEditavel .vlr'));

  var total = selecionados.reduce(function(soma, el) {
    var numero = el.innerHTML.slice(3).replace(',', '.');
    return soma + Number(numero);
  }, 0);

  document.getElementById('valor_total').innerHTML = 'R$ ' + total.toLocaleString('pt-br', {
    minimumFractionDigits: 2,
    currency: 'BRL'
  });
}
somaTds();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table id="tblEditavel" class="table table-condensed">
  <tr>
    <th>#</th>
    <th>Nome</th>
    <th>Valor</th>
  </tr>
  <tr>
    <td>3</td>
    <td>Casa</td>
    <td class="vlr">R$ 200,00</td>
  </tr>
  <tr>
    <td>89</td>
    <td>Loja</td>
    <td class="vlr">R$ 551,00</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td><span id="valor_total">somando...</span></td>
</table>
<button class="btn btn-primary" name="btnSoma" onclick="somaTds()">Somar</button>

Answer 2

You need to convert the value "R$ 200,00" to be converted by Number.

Use the replace to remove the R$ and transform , in ..

Behold:

var texto = 'R$ 200,00';

var numero = texto.replace(',', '.').replace('R$ ', '');


console.log(Number(numero));

console.log(Number(texto)); // aqui vai dar errado, vai dar NaN