2

Pues esa es mi pregunta, estoy aprendiendo javascript y en un ejercicio de clase me piden que incremente la cantidad de una celda y tenga repercusión en un span. En mi caso tengo que aumentar el número de unidades, que deberá incrementar el precio correspondiente en la celda del total.

Trozo de código HTML

<table class="table table-condensed" id="myTable">
        <thead>
            <tr>
                <th>#</th>
                <th>Nombre producto</th>
                <th>Cantidad</th>
                        <th>Precio unitario</th>
                <th>Precio</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody id="tbodyusuarios">
            <tr>
              <td>1</td>
              <td>Camiseta</td>
              <td><input type="number" id="cantidadCamiseta" value="3" precio="5" onclick="incrementPriceRow1"></td>
                <td><span>5</span>€</td>
              <td><span id="precioFila1">15</span>€</td>
              <td>
                <button class="btn btn-default" type="submit" onclick="deleteRow(this)">Eliminar</button>
            </td>

Mi método en javascript

function incrementPriceRow1(){
    var precioFila1 = document.getElementById("precioFila1").innerHTML;

    var cantidadCamiseta = document.getElementById("cantidadCamiseta").value;

    return cantidadCamiseta*precioFila1;

}
8
  • Sé que hay cosas con jquery pero añado que me han encomendado esta tarea únicmanete para javascript y html
    – Jose
    Commented el 17 ene. 2017 a las 18:16
  • ¿Dónde se llama a la función incrementPriceRow1?
    – Alvaro Montoro
    Commented el 17 ene. 2017 a las 18:27
  • He puesto la llamada a la función, he reeditado el post, pero continúa sin funcionar, tengo la impresión de que no está obteniendo los valores correctamente
    – Jose
    Commented el 17 ene. 2017 a las 18:33
  • @Jose tienes 2 respuestas funcionales Commented el 17 ene. 2017 a las 18:58
  • 2
    Posible duplicado de Suma de Inputs con resultado automatico Commented el 17 ene. 2017 a las 19:05

3 respuestas 3

3

Podrías hacer lo siguiente:

  • En lugar de usar ids, podrías usar class para identificar los distintos datos en la fila.

    • class="cantidad" para identificar los input
    • class="precio" para identificar los span con el precio
    • class="total" para identificar los span donde se guarda el total.
  • Te suscribes al evento input, el cual se dispara cada vez que se cambia el valor de los input.cantidad, buscas dentro de la fila el precio y estableces el total, multiplicando cantidad * precio.

Así por ejemplo:

$('#tbodyusuarios')
  .on('input', '.cantidad', function() {
    var $input = $(this), // input.cantidad
        cantidad = parseInt($input.val(), 10), // valor de input.cantidad
        $tr = $input.closest('tr'), // fila del input.canitdad
        precio = parseInt($tr.find('.precio').text(), 10), // valor del span.precio
        $total = $tr.find('.total'); // elemento span.total
    
    $total.text(precio * cantidad); // seteamo el valor del span.total
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-condensed" id="myTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Nombre producto</th>
      <th>Cantidad</th>
      <th>Precio unitario</th>
      <th>Precio</th>
      <th>Acciones</th>
    </tr>
  </thead>
  <tbody id="tbodyusuarios">
    <tr>
      <td>1</td>
      <td>Camiseta</td>
      <td><input type="number" class="cantidad" value="3"/></td>
      <td><span class="precio">5</span>€</td>
      <td><span class="total">15</span>€</td>
      <td><button class="btn btn-default" type="submit" onclick="deleteRow(this)">Eliminar</button></td>
     </tr>
    <tr>
      <td>1</td>
      <td>Pantalon</td>
      <td><input type="number" class="cantidad" value="1"/></td>
      <td><span class="precio">8</span>€</td>
      <td><span class="total">8</span>€</td>
      <td><button class="btn btn-default" type="submit" onclick="deleteRow(this)">Eliminar</button></td>
     </tr>
   </tbody>
</table>

2

Modifique tu funcion incrementPriceRow1(), ademas que esta funcion no estaba siendo usada, y para solucionar el problema no necesitas devolver nada.

con la funcion value obtengo los caracteres del campo

con la funcion innerHTML inserto texto

cree un id="precio" en el span de precio, para obtener el texto del span y luego con parseInt() convertirlo a numero

solucionando tu problema:

function incrementPriceRow1(){
  
    var precioFila1 = document.getElementById("precioFila1");
    var precio = document.getElementById("precio").innerHTML;
    
    var cantidadCamiseta =document.getElementById("cantidadCamiseta").value;
    var total=parseInt(cantidadCamiseta)*parseInt(precio);
    precioFila1.innerHTML=total;


}
<table class="table table-condensed" id="myTable">
        <thead>
            <tr>
                <th>#</th>
                <th>Nombre producto</th>
                <th>Cantidad</th>
                        <th>Precio unitario</th>
                <th>Precio</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody id="tbodyusuarios">
            <tr>
              <td>1</td>
              <td>Camiseta</td>
              <td><input type="number" id="cantidadCamiseta" value="" precio="5"></td>
                <td><span id="precio">5</span>€</td>
              <td><span id="precioFila1"></span>€</td>
              <td>
                <button class="btn btn-default" type="submit" onclick="incrementPriceRow1()">prueba</button>
            </td>

1
  • Correcto!! funciona!! muchas gracias!
    – Jose
    Commented el 17 ene. 2017 a las 19:22
2

El código que compartes presenta varios problemas:

  • A la llamada a la función incrementPriceRow1 le faltan los paréntesis, debería ser así: incrementPriceRow1().
  • Estás multiplicando los valores incorrectos: no quieres multiplicar la cantidad y el PrecioFila1, lo que quieres multiplicar es la cantidad por la cantidad/precio unitario. Para ello:
    • añade un ID al span que contiene el precio unitario
    • Usa el nuevo id en lugar de PrecioFila1
  • No hace falta que la función devuelva nada, lo que debe hacer es cambiar el valor de PrecioFila1, que se puede hacer asignándole el valor al innerHTML.

Corriendo eso, te queda algo así que ya funciona sin problemas:

function incrementPriceRow1(){
  
    var precioUnitario = document.getElementById("precioUnitario").innerHTML;
    var cantidadCamiseta = document.getElementById("cantidadCamiseta").value;

    document.getElementById("precioFila1").innerHTML = cantidadCamiseta * precioUnitario;

}
<table class="table table-condensed" id="myTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Nombre producto</th>
      <th>Cantidad</th>
      <th>Precio unitario</th>
      <th>Precio</th>
      <th>Acciones</th>
    </tr>
  </thead>
  <tbody id="tbodyusuarios">
    <tr>
      <td>1</td>
      <td>Camiseta</td>
      <td><input type="number" id="cantidadCamiseta" value="3" precio="5" onclick="incrementPriceRow1()"></td>
      <td><span id="precioUnitario">5</span>€</td>
      <td><span id="precioFila1">15</span>€</td>
      <td>
        <button class="btn btn-default" type="submit" onclick="deleteRow(this)">Eliminar</button>
      </td>
    </tr>
  </tbody>
</table>

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.