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...
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 } ?>
id
ele é o identificador exclusivo do elemento no documento, veja aqui.