Pure Javascript: Multiply tds values in a table and return the value

Asked

Viewed 35 times

-3

What’s up with you guys? I have a shopping list and would like to multiply the quantity of the product with its value thus returning the result and add all the results.
I have already managed to do this, the problem is being to make with various products it is only multiplying all the values at once, I need help.

var quant = document.querySelectorAll(".quant");
var preco = document.querySelectorAll(".preco");
var total = 1;
    
for (var i = 0; i < quant.length && i < preco.length; i++)
{
   total*= Number(quant[i].innerHTML) * parseFloat(preco[i].innerHTML.toString().replace(",","."));
   document.querySelector(".valor").innerHTML = total.toString().replace(".",",");
  
}
<body>
  <table id="tabela" border="1px">
      <tr>
          <td>Produto</td>
          <td>Quant</td>
          <td>Preço</td>
          <td>Valor Total</td>
      </tr>
      <tr>
          <td>Stawka</td>
          <td class="quant">3</td>
          <td class="preco">30,50</td>
          <td class="valor"></td>
      </tr>
      <tr>
          <td>Stawka</td>
          <td class="quant">5</td>
          <td class="preco">25</td>
          <td class="valor"></td>
      </tr>
   </table>
</body>

javascript table

1 answer

1


The way you’re using the for perhaps not the best, the best would be to do the for for each line, to ensure that it picks up the values of the line, but first let’s see what happens in your code:

  • is using the index to take the amount and value, but does not use the index to put the result, it should be something like document.querySelector(".valor")[i].innerHTML;

  • should reset the sum value for each row, so if you want the general total, you should use another variable.

I adapted the code with these two fixes, see below:

var quant = document.querySelectorAll(".quant");
var preco = document.querySelectorAll(".preco");
var valor = document.querySelectorAll(".valor");
var totalLinha = 0;
var total = 0;
    
for (var i = 0; i < quant.length; i++)
{
   totalLinha = Number(quant[i].innerHTML) * parseFloat(preco[i].innerHTML.toString().replace(",","."));
   valor[i].innerHTML = totalLinha.toString().replace(".",",");
   total += totalLinha;
}

document.getElementById("total").innerHTML = total.toString().replace(".",",");
<body>
  <table id="tabela" border="1px">
      <tr>
          <td>Produto</td>
          <td>Quant</td>
          <td>Preço</td>
          <td>Valor Total</td>
      </tr>
      <tr>
          <td>Stawka</td>
          <td class="quant">3</td>
          <td class="preco">30,50</td>
          <td class="valor"></td>
      </tr>
      <tr>
          <td>Stawka</td>
          <td class="quant">5</td>
          <td class="preco">25</td>
          <td class="valor"></td>
      </tr>
   </table>
</body>

Total: <span id="total"></span>

  • 1

    Thank you very, very much, it’s been a long time

Browser other questions tagged javascript table

You are not signed in. Login or sign up in order to post.