Make dynamic calculations in JS and display in a PHP list

Question

I’m setting up a ordering system and within it, I’m showing the products I have registered. So far no problems. Within this list, I need to dynamically calculate the quantity input with the value input and display the result on the side. I have three inputs:

When I add my Avascript, in the application, only the first product that is in the list, does the dynamic calculation. My table, with the list of products loaded, is inside a While.

I don’t know if there’s anything there but I think I have to change: Document.getElementById for Class and in my inputs switch from ID to Class. However I don’t know how to do this...

var first = document.getElementById('first');
var second = document.getElementById('second');
var result = document.getElementById('result');

first.addEventListener("input", sum);
second.addEventListener("input", sum);

function sum() {

  var one = parseFloat(first.value) || 0;
  var two = parseFloat(second.value) || 0;

  var add = one * two;

  result.innerHTML = add;

  console.log(result);

}

<?php
while ($rows = mysqli_fetch_assoc($resultado_produtos)) { ?>

  <td class="text-center">
    <input type="number" style="width: 80px;" name="quantidade[]" class="form-control" id="first">
  </td>

  <td class="text-center">
    <input name="valor[]" value="<?php echo $rows['precountario_produto']; ?>" type="number" min="0.00" max="10000.00" step="0.01" class="form-control" id="second" placeholder="0,00" style="width: 90px;">
  </td>

  <td class="text-center">
    <small>R$</small>
    <h6 id="result"></h6>
  </td>

  <?php  } ?>

Answer 1

Document.getElementById always takes only one record, for imagining that the id will be unique on the page, to take several elements use instead Document.querySelectorAll("#first"), being the # necessary to indicate that we are searching for all elements that have this id, but still, that would not be the best approach. The correct thing would be for you to already inform the javascript function inside php while, something like:

<?php
while ($rows = mysqli_fetch_assoc($resultado_produtos)) { ?>

  <td class="text-center">
    <input type="number" input="calculate('<?php echo $rows['id_produto']; ?>')" style="width: 80px;" name="quantidade[]" class="form-control" id="produto<?php echo $rows['id_produto']; ?>qtd">
  </td>

  <td class="text-center">
    <input name="valor[]" input="calculate('<?php echo $rows['id_produto']; ?>')"  value="<?php echo $rows['precountario_produto']; ?>" type="number" min="0.00" max="10000.00" step="0.01" class="form-control" id="produto<?php echo $rows['id_produto']; ?>preco" placeholder="0,00" style="width: 90px;">
  </td>

  <td class="text-center">
    <small>R$</small>
    <h6 id="result<?php echo $rows['id_produto']; ?>"></h6>
  </td>

  <?php  } ?>

So the product id will be passed dynamizing during while and the id of your inputs will all be different and will always be concatenated with the product + id + price, so your javascript would look like this:

function calculate(idProduto) {
  const preco = document.getElementById(`produto${idProduto}preco`);
  const qtd = document.getElementById(`produto${idProduto}qtd`);
  const result = document.getElementById(`result${idProduto}`);

  const one = parseFloat(preco.value) || 0;
  const two = parseFloat(qtd .value) || 0;

  const newValue = one * two;

  result.innerText = newValue 

  console.log(result);
}