Home / Questions / 510878
Accepted
Libra2880
Asked: 2022-06-25 12:27:13 +0800 CST 2022-06-25 12:27:13 +0800 CST

How can I show the total sum in input of type number in javascript?

  • 772

I have a table when I add the totals, it shows the total sum in the input but the sum does not correspond, if someone from the community can help me with the solution of this problem

Image

enter image description here

Form

<div class="form-group row">
  <div class="col-md-2">
    <select name="producto" id="producto" required>
      <option value="-1">Seleccione Producto</option>
      <c:forEach items="${productos}" var="producto">
        <option value="${producto.idproducto}">${producto.nomproducto}</option>
      </c:forEach>
    </select>
  </div>
  
  <div class="col-md-2">
    <input type="number" class="form-control" name="cantidad" id="cantidad" autofocus />
  </div>
  
  <div class="col-md-2">
    <input type="number" class="form-control" name="pesobruto" id="pesobruto" onkeyup="restar();" autofocus />
  </div>
  
  <div class="col-md-1">
    <input type="number" class="form-control" name="tara" id="tara" onkeyup="restar();" autofocus />
  </div>
  
  <div class="col-md-2">
    <input type="number" class="form-control" name="pesoneto" id="pesoneto" disabled autofocus />
  </div>
  
  <div class="col-md-1">
    <input type="number" class="form-control" name="preciocompra" id="preciocompra" autofocus />
  </div>
  
  <div class="col-md-2">
    <input type="number" class="form-control" id="descuento" value="0" disabled />
  </div>
</div>


<div class="form-group row">
  <div class="col-md-12 col-md-offset-2">
    <div class="card">
      <div class="card-body">
        <button type="submit" onclick="agregarFila();" class="btn btn-success">agregar</button>
      </div>
    </div>
  </div>
</div>

<div class="table-responsive">
  <table class="table table-striped table-bordered" id="tabla2">
    <thead>
      <tr>
        <th>Producto</th>
        <th>Cantidad</th>
        <th>Precio Compra</th>
        <th>Peso Neto</th>
        <th>Descuento</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

<div class="form-group row justify-content-end">
  <label for="precio_bruto" class="control-label col-md-2">Precio Bruto</label>
  <label for="descuento" class="control-label col-md-2">Descuento</label>
  <label for="descuento" class="control-label col-md-2">Precio Neto</label>
  <label for="descuento" class="control-label col-md-2">I.G.V</label>
  <label for="descuento" class="control-label col-md-2">Total</label>
</div>

<div class="form-group row justify-content-end">
  <div class="col-md-2">
    <input type="text" class="form-control" id="pbruto" autofocus />
  </div>
  <div class="col-md-2">
    <input type="text" class="form-control" id="descuento1" autofocus />
  </div>
  <div class="col-md-2">
    <input type="text" class="form-control" id="pneto" autofocus />
  </div>
  <div class="col-md-2">
    <input type="text" class="form-control" id="igv" autofocus />
  </div>
  <div class="col-md-2">
    <input type="text" class="form-control" id="mtotal" autofocus />
  </div>
</div>

JavaScript

function agregarFila(){
    
    
     let cantidad = document.getElementById('cantidad').value;
     let preciocompra = document.getElementById('preciocompra').value;
     let pesoneto = document.getElementById('pesoneto').value;
     let descuento = document.getElementById('descuento').value;
     let producto = document.getElementById('producto').options[document.getElementById('producto').selectedIndex].text;    
     let total=Number.parseFloat((preciocompra*pesoneto)-descuento).toFixed(2);
    
    
     let table = document.getElementsByTagName('table')[0];
      
    
      let newRow = table.insertRow(table.rows.length);
      
    
      let cel1 = newRow.insertCell(0);
      let cel2 = newRow.insertCell(1);
      let cel3 = newRow.insertCell(2);
      let cel4 = newRow.insertCell(3);
      let cel5 = newRow.insertCell(4);
      let cel6 = newRow.insertCell(5);     
      
      cel1.innerHTML = producto;
      cel2.innerHTML = cantidad;
      cel3.innerHTML = preciocompra;
      cel4.innerHTML = pesoneto;
      cel5.innerHTML = descuento;
      cel6.innerHTML = total;            

     
      
      for (let i = 0; i < cel6.length; i++) {
          if(Number(cel6[i].value))
              
              total += (parseFloat(cel6[i].value) || 0 );
             
          
          }   
      
      
     document.getElementById('mtotal').value = total;
   
    
}
javascript

1 Answers

  1. Best Answer

    I already gave you a solution I leave the code

    function agregarFila(){


 let cantidad = document.getElementById('cantidad').value;
 let preciocompra = document.getElementById('preciocompra').value;
 let pesoneto = document.getElementById('pesoneto').value;
 let descuento = document.getElementById('descuento').value;
 let producto = document.getElementById('producto').options[document.getElementById('producto').selectedIndex].text;    

 
 let subtotal=Number.parseFloat((preciocompra*pesoneto)-descuento).toFixed(2);
    
 
let impuesto=Number.parseFloat(subtotal*0.19).toFixed(2);
    impuesto= document.getElementById('impuesto').value;
let total=Number.parseFloat(subtotal).toFixed(2)+Number.parseFloat(impuesto).toFixed(2);
    total= document.getElementById('total').value;

    // let table = document.getElementsByTagName('table')[0];

        let table = document.getElementById('tabla2');
  let newRow = table.insertRow(table.rows.length);
  

  let cel1 = newRow.insertCell(0);
  let cel2 = newRow.insertCell(1);
  let cel3 = newRow.insertCell(2);
  let cel4 = newRow.insertCell(3);
  let cel5 = newRow.insertCell(4);
  let cel6 = newRow.insertCell(5);     
  
  cel1.innerHTML = producto;
  cel2.innerHTML = cantidad;
  cel3.innerHTML = preciocompra;
  cel4.innerHTML = pesoneto;
  cel5.innerHTML = descuento;
  cel6.innerHTML = subtotal;      
  

  
  calcularSubtotal();

    } function calculateSubtotal(){

     var table = document.getElementById('tabla2');
    let subtotal = 0
    for(let i = 1; i<table.rows.length; i++){
        subtotal+=Number(table.rows[i].cells[5].innerText)
    }
    const totalInput = document.getElementById('subtotal')
    totalInput.value=subtotal

    }

    • 1