-1

Estou montando um sistema de pedidos e dentro dele, estou mostrando os produtos que tenho cadastrado. Até aí sem problemas. Dentro desta lista, preciso calcular, dinamicamente, o input de quantidade com o input de valor e exibir o resultado ao lado. eu tenho três inputs:

Quando eu adiciono meu javaScript, na aplicação, somente o primeiro produto que está na lista, faz o calculo dinâmico. Minha tabela, com a lista de produtos carregada, está dentro de um While.

Não sei se tem alguma coisa haver mas, acredito que tenho que trocar de: document.getElementById para Class e nos meus inputs trocar de ID para Class. Porém não sei fazer isso...

inserir a descrição da imagem aqui

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  } ?>

2
  • Você não deve repetir o atributo id ele é o identificador exclusivo do elemento no documento, veja aqui. 9/01/2021 às 19:17
  • Olá meu amigo, vou ver sim mas, não entendi muito bem... 9/01/2021 às 19:21

1 Resposta 1

1

document.getElementById pega sempre apenas um registro, por imaginar-se que o id será unico na pagina, para pegar varios elementos use ao inves o document.querySelectorAll("#first"), sendo a # necessaria para indicar que estamos buscando por todos os elementos que tenham esse id, mas ainda sim, essa não seria a melhor abordagem. O correto mesmo seria você já informar a função javascript dentro do while do php, algo como:

<?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  } ?>

Assim o id do produto será passado dinamicando durante o while e o id do seus inputs serão todos diferentes sendo que sempre será concatenado com o produto + id + preco, então seu javascript ficaria assim:

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);
}
3
  • João, obrigado por me responder. no caso, ficaria assim?: const preco = document.getElementById('produto${<?php echo $rows['id_produto']; ?>}preco'); const qtd = document.getElementById('produto${<?php echo $rows['id_produto']; ?>}qtd'); const result = document.getElementById('result${<?php echo $rows['id_produto']; ?>}'); 9/01/2021 às 19:52
  • Assim não funcionaria, porquê você só tem acesso a essa variave de id dentro do while, no javascript não, passar o id como parametro pra função javascript dentro do while funciona por aquele valor sempre o mesmo desde o momento que o php está montando a pagina até a exibição no browser, se fizer isso e verificar os elementos no html você tera calculate(1), calculate(2), calculate(3) e assim por diante. 9/01/2021 às 20:08
  • Vou tentar agora... 9/01/2021 às 20:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .