1

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);
    }
  }

2 respuestas 2

0

Aquí está el código que puedes utilizar:

function multiplicar (){
    var quantity = document.querySelectorAll('.quantity');
    var price = document.querySelectorAll('.price');
    var subtotals = document.querySelectorAll('.subtotal');

    for(var i = 0; i < quantity.length; i++){ 
      subtotals[i].value = quantity[i].value * price[i].value;
    }

  }

Estabas utilizando lenght en lugar de length, un error de escritura. Lo que hará el bucle será hacer el calculo de todos los input que tengan la clase quantity y price y la colocará en la posición que le corresponde de subtotal. Como cada los tres elementos tienen el mismo número de campos, solo necesitamos un bucle.

1
  • Te agradezco Rodrigo va fenomenal! =D Commented el 6 jun. 2019 a las 19:19
0

el problema esta en el querySelector. Tu debes utilizar querySelectorAll ya que te referieres a varios items de la clase "quantity" y "price". querySelectorAll se deve recorrer como un arreglo.

11
  • Acabo de intentar cambiando los querySelector a querySelectorAll y hoy no me calculo ninguno Doormut jeje Commented el 6 jun. 2019 a las 3:40
  • Pero lo estas recorriendo como un array? Commented el 6 jun. 2019 a las 3:41
  • No Doormut eso como seria eso? Commented el 6 jun. 2019 a las 3:42
  • Claro Doormut, me ayudara a enteder mejor =D Commented el 6 jun. 2019 a las 3:50
  • Te dejo un ejemplo: var x = document.querySelectorAll(".clase"); console.log(x[0].value); //muestra el valor del primer elemento console.log(x[1].value); //muestra el valor del segundo elemento Commented el 6 jun. 2019 a las 3:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.