Estoy empezando con Javascript, y he estado intentando realizar lo siguiente, tengo una tabla con item en el cual por medio de inputs intento calcular el total de cada item, independientemente de la cantidad de items que existan, sin embargo, unicamente solo logro calcular el primer item, de que forma puedo hacer qu me calcule cada item, independientemente de la cantidad de item que halla, agradezco inmensamente su ayuda, comparto mi codigo:
codigo.html
<table>
<thead>
<tr>
<td>Item</td>
<td>Cantidad</td>
<td>Precio</td>
<td>Subtotal</td>
</tr>
</thead>
<tbody>
<tr>
<td>Manzana</td>
<td><input type="text" class="quantity" onChange="multiplicar();"></td>
<td><input type="text" class="price" onChange="multiplicar();"></td>
<td><input type="text" class="subtotal"></td>
</tr>
<tr>
<td>Pera</td>
<td><input type="text" class="quantity" onChange="multiplicar();"></td>
<td><input type="text" class="price" onChange="multiplicar();"></td>
<td><input type="text" class="subtotal"></td>
</tr>
<tr>
<td>Uva</td>
<td><input type="text" class="quantity" onChange="multiplicar();"></td>
<td><input type="text" class="price" onChange="multiplicar();"></td>
<td><input type="text" class="subtotal"></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="text-right">Total</td>
</tr>
</tbody>
</table>
codigo.js
<script>
function multiplicar(){
input1 = document.querySelector(".quantity").value;
input2 = document.querySelector(".price").value;
total = parseInt(input1)*parseInt(input2);
document.querySelector(".subtotal").value = total;
}
</script>
#
Actualizacion:
function multiplicar(){
var quantity = document.querySelectorAll('.quantity');
var price = document.querySelectorAll('.price');
for(var i = 0; i < quantity.lenght; i++){
console.log(quantity[i].value);
}
for(var i = 0; i < price.lenght; i++){
console.log(price[i].value);
}
}