1

Estoy haciendo un sistema de arqueo de caja, con JavaScript y php, los datos serán cargados en una base de datos mysql, estoy teniendo problemas con el JavaScript que a la hora de sumar los input no me suma el total siempre me falta un numero, les dejo los códigos que estoy usando.

Formulario HTML

function Suma1() {
    var billetes1 = document.calculadora.billetes1.value;
    var billetes2 = document.calculadora.billetes2.value;
    var Rbilletestotal = document.calculadora.Rbilletestotal.value;
        try{
    billetes1 = (isNaN(parseFloat(billetes1)))? 0 : parseFloat(billetes1);
    billetes2 = (isNaN(parseFloat(billetes2)))? 0 : parseFloat(billetes2);
    Rbilletestotal = (isNaN(parseFloat(Rbilletestotal)))? 0 : parseFloat(Rbilletestotal);
    document.calculadora.Rbilletes1.value = billetes1*1000;
    document.calculadora.Rbilletes2.value = billetes2*500;
            
            var Rbilletes1 = billetes1*1000;
            var Rbilletes2 = billetes2*500;
            document.calculadora.Rbilletestotal.value = Rbilletes1 + Rbilletes2;
            document.calculadora.resultado1.value = document.calculadora.Rbilletestotal.value;
            
            
        }
   catch(e) {}
}   

function Suma2() {
    let arqueoMonto1 = document.calculadora.arqueoMonto1.value;
    let arqueoMonto2 = document.calculadora.arqueoMonto2.value;
    var Rbilletestotal = document.calculadora.Rbilletestotal.value;
    var arqueoTotal = document.calculadora.arqueoTotal.value;
    var resultado1 = document.calculadora.resultado1.value;
    
        try{
    arqueoMonto1 = (isNaN(parseFloat(arqueoMonto1)))? 0 : parseFloat(arqueoMonto1);
    arqueoMonto2 = (isNaN(parseFloat(arqueoMonto2)))? 0 : parseFloat(arqueoMonto2);
    arqueoTotal = (isNaN(parseFloat(arqueoTotal)))? 0 : parseFloat(arqueoTotal);
    Rbilletestotal = (isNaN(parseFloat(Rbilletestotal)))? 0 : parseFloat(Rbilletestotal);
    resultado1 = (isNaN(parseFloat(resultado1)))? 0 : parseFloat(resultado1);
            
    document.calculadora.arqueoTotal.value = arqueoMonto1 + arqueoMonto2;
    document.calculadora.resultado1.value = Rbilletestotal + arqueoTotal;

            
        }
   catch(e) {}
}   

function Suma3() {
    var comprobantemonto1 = document.calculadora.comprobantemonto1.value;
    var comprobantemonto2 = document.calculadora.comprobantemonto2.value;
    var Rbilletestotal = document.calculadora.Rbilletestotal.value;
    var arqueoTotal = document.calculadora.arqueoTotal.value;
    var comprobantetotal = document.calculadora.comprobantetotal.value;
    var resultado1 = document.calculadora.resultado1.value;
    
        try{
    comprobantemonto1 = (isNaN(parseFloat(comprobantemonto1)))? 0 : parseFloat(comprobantemonto1);
    comprobantemonto2 = (isNaN(parseFloat(comprobantemonto2)))? 0 : parseFloat(comprobantemonto2);
    Rbilletestotal = (isNaN(parseFloat(Rbilletestotal)))? 0 : parseFloat(Rbilletestotal);
    arqueoTotal = (isNaN(parseFloat(arqueoTotal)))? 0 : parseFloat(arqueoTotal);
    comprobantetotal = (isNaN(parseFloat(comprobantetotal)))? 0 : parseFloat(comprobantetotal);
    resultado1 = (isNaN(parseFloat(resultado1)))? 0 : parseFloat(resultado1);
    document.calculadora.comprobantetotal.value = comprobantemonto1 + comprobantemonto2;
    document.calculadora.resultado1.value = Rbilletestotal + arqueoTotal + comprobantetotal;
            
        }
   catch(e) {}
}   
<form class="needs-validation" name="calculadora" method="post" action="gracias.php" novalidate>
        <hr class="my-4">
        <div class="container">
        <div class="title-primary">Arqueo de Efectivo</div>
        </div>
            
        <div class="container">
        <table class="table table-striped" width="67%" border="0" align="center" cellpadding="4" cellspacing="4">
        <tbody>
        <tr>
        <td width="28%" align="right">
        <input style="width: 60px; float: right; text-align: center" type="number" name="billetes1" value='' onKeyUp="Suma1()">
        </td>
        <td width="6%" align="right">1000</td>
        <td width="66%">
        <input type="number" name="Rbilletes1" value='' placeholder="0.00" disabled>
        </td>
        </tr>
        <tr>
        <td width="28%" align="right">
        <input style="width: 60px; float: right; text-align: center" type="number" name="billetes2" value='' onKeyUp="Suma1()">
        </td>
        <td width="6%" align="right">500</td>
        <td width="66%">
        <input type="number" name="Rbilletes2" value='' placeholder="0.00" disabled>
        </td>
        </tr>
        <tr>
        <td>&nbsp;</td>
        <td align="right">Total</td>
        <td><input type="number" name="Rbilletestotal" id="Rbilletestotal" step='0.01' value='' placeholder="0.00" disabled></td>
        </tr>
        </tbody>
        </table>
        </div>
        <!--##################   ARQUEO DE VALORES ########################-->
        <hr class="my-4">
        <div class="container">
        <div class="title-primary">Arqueo de Valores</div>
        </div>
        <div class="container">
        <table class="table table-striped" width="67%" border="0" align="center" cellpadding="4" cellspacing="4">
        <tbody>
        <tr>
        <td width="23%" align="center">Banco</td>
        <td width="14%" align="center">Vencimiento</td>
        <td width="22%" align="center"> Cliente</td>
        <td width="23%" align="center">Numero</td>
        <td width="18%">Monto</td>
        </tr>
        <tr>
        <td width="23%" align="center">
        <select class="form-select" id="arqueoBanco1" name="arqueoBanco1" required>
        <option value="" disabled selected hidden></option>
        <option value="Daniela Piazza">Macro</option>
        <option value="Gisella Rocchi">ICBC</option>
        <option value="Christian Misetich">Santander</option>
        <option value="Christian Misetich">Galicia</option>
        </select>   
        </td>
        <td width="14%" align="center">
        <input type="date" name="arqueoFecha1" value='' id="arqueoFecha1"></td>
        <td width="22%" align="center">
        <input type="text" name="arqueoCliente1" value='' id="arqueoCliente1"></td>
        <td width="23%" align="center">
        <input type="number" name="arqueoNumero1" value='' id="arqueoNumero1"></td>
        <td width="18%">
        <input type="number" name="arqueoMonto1" value='' placeholder="0.00" id="arqueoMonto1" onKeyUp="Suma2()"></td>
        </tr>
        <tr>
        <td width="23%" align="center">
        <select class="form-select" id="arqueoBanco2" name="arqueoBanco2" required>
        <option value="" disabled selected hidden></option>
        <option value="Daniela Piazza">Macro</option>
        <option value="Gisella Rocchi">ICBC</option>
        <option value="Christian Misetich">Santander</option>
        <option value="Christian Misetich">Galicia</option>
        </select>   
        </td>
        <td width="14%" align="center">
        <input type="date" name="arqueoFecha2" value='' id="arqueoFecha2"></td>
        <td width="22%" align="center">
        <input type="text" name="arqueoCliente2" value='' id="arqueoCliente2"></td>
        <td width="23%" align="center">
        <input type="number" name="arqueoNumero2" value='' id="arqueoNumero2"></td>
        <td width="18%">
        <input type="number" name="arqueoMonto2" value='' placeholder="0.00" id="arqueoMonto2" onKeyUp="Suma2()"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td align="right">&nbsp;</td>
          <td>&nbsp;</td>
          <td align="right">Total</td>
          <td><input type="number" name="arqueoTotal" id="arqueoTotal" step='0.01' value='' placeholder="0.00" disabled></td>
          </tr>
        </tbody>
        </table>
        </div>      
        <hr class="my-4">
        <div class="container">
        <div class="title-primary">Arqueo de Comprobantes</div>
        </div>
        <div class="container">
        <table class="table table-striped" width="67%" border="0" align="center" cellpadding="4" cellspacing="4">
        <tbody>
        <tr>
          <td width="23%" align="center">Fecha</td>
          <td width="14%" align="center">Cliente</td>
          <td width="23%" align="center">Numero</td>
          <td width="18%">Monto</td>
          </tr>
        <tr>
          <td align="center"><input type="date" name="comprobantefecha1" value='' id="comprobantefecha1"></td>
          <td align="center"><input type="text" name="comprobantecliente1" value='' id="arqueoCliente6"></td>
          <td align="center"><input type="number" name="comprobantenumero1" value='' id="comprobantenumero1"></td>
          <td><input type="number" name="comprobantemonto1" value='' placeholder="0.00" id="comprobantemonto1" onKeyUp="Suma3()"></td>
          </tr>
        <tr>
          <td align="center"><input type="date" name="comprobantefecha2" value='' id="arqueoFecha7"></td>
          <td align="center"><input type="text" name="comprobantecliente2" value='' id="arqueoCliente7"></td>
          <td align="center"><input type="number" name="comprobantenumero2" value='' id="arqueoNumero6"></td>
          <td><input type="number" name="comprobantemonto2" value='' placeholder="0.00" id="arqueoMonto6" onKeyUp="Suma3()"></td>
          </tr>
        <tr>
          <td>&nbsp;</td>
          <td align="right">&nbsp;</td>
          <td align="right">Total</td>
          <td><input type="number" name="comprobantetotal" id="comprobantetotal" step='0.01' value='' placeholder="0.00" disabled></td>
          </tr>
        </tbody>
        </table>
        </div>
        <div class="container">
        <div class="title-primary">TOTAL GENERAL</div>
        </div>
        <div class="container">
        <table class="table table-striped" width="80%" border="0" align="center" cellpadding="4" cellspacing="4">
        <tbody>
        <tr>
          <td width="312">&nbsp;</td>
          <td width="198">&nbsp;</td>
          <td width="410"></td>
          </tr>
        <tr>
        <td><strong>TOTAL GENERAL:</strong></td>
        <td><input type="number" name="resultado1" step='0.01' value='0.00' placeholder='0.00' id="resultado1" disabled></td>
            
                </tbody>
        </table>
        </div>
            
        <div style="height: 10px;"></div>
        <div class="text-center">
        <button class="btn btn-primary btn-lg" type="submit">ENVIAR</button>
        </div>
        <div style="height: 100px;"></div>
  </form>

La idea es que en el input resultado1 vaya sumando todos los otros resultados, ya que los mismos serán insertados en la base de datos, lo raro es que siempre falta un numero y otra cosa: si empiezo a llenar el formulario de abajo para arriba no suma nada,

1 respuesta 1

1

Primer error:

El error del que no suma el total era por los tipos de variables que le asignabas aquí:

function Suma2() {
  let arqueoMonto1 = document.calculadora.arqueoMonto1.value;
  let arqueoMonto2 = document.calculadora.arqueoMonto2.value;
  // ...
}

Tendría que ser var al igual que las demás para que puedan ser modificadas al momento de sumar y no se reemplace por el valor final que se modifique (al entrar a la función, obvio).

function Suma2() {
  var arqueoMonto1 = document.calculadora.arqueoMonto1.value;
  var arqueoMonto2 = document.calculadora.arqueoMonto2.value;
  // ...
}

Segundo error:

Ahora, respecto al otro error sobre que si empiezas a llenar el formulario de abajo para arriba no te sumaba nada, era porque tenías que sumar el total final de tus 3 secciones (Arqueo de Efectivo, Arqueo de Valores y Arqueo de Comprobantes), es decir, el valor que obtenga estos totales, tienes que sumarlas para cada vez que ingrese a la función, quiere decir que si yo comienzo a rellenar el formulario desde la última sección hacia arriba, ya estoy sumando los 3 totales de las 3 secciones, cosa que esto no sucedía.

Psdt: Éste error lo descubrí optimizando tu código ya que a simple vista no podía entenderlo bien, el cambio importante fue inicializar a "resultado1" en 0 para que cada vez que se ingrese a la función la variable sea 0 y vuelva a sumar:


Código completo:

function Suma1() {
    var billetes1 = document.calculadora.billetes1.value;
    var billetes2 = document.calculadora.billetes2.value;

    var Rbilletestotal = document.calculadora.Rbilletestotal.value; // total arqueo de efectivo
    var arqueoTotal = document.calculadora.arqueoTotal.value; // total arqueo de valores
    var comprobantetotal = document.calculadora.comprobantetotal.value; // total arqueo de comprobantes

    var resultado1 = 0; // total final

    try {
        billetes1 = (isNaN(parseFloat(billetes1))) ? 0 : parseFloat(billetes1);
        billetes2 = (isNaN(parseFloat(billetes2))) ? 0 : parseFloat(billetes2);
        Rbilletestotal = (isNaN(parseFloat(Rbilletestotal))) ? 0 : parseFloat(Rbilletestotal);

        document.calculadora.Rbilletes1.value = billetes1 * 1000;
        document.calculadora.Rbilletes2.value = billetes2 * 500;

        var Rbilletes1 = billetes1 * 1000;
        var Rbilletes2 = billetes2 * 500;

        Rbilletestotal = Rbilletes1 + Rbilletes2;
        resultado1 = Rbilletestotal + arqueoTotal + comprobantetotal; // siempre sumo a los 3 totales

        document.calculadora.Rbilletestotal.value = Rbilletestotal;
        document.calculadora.resultado1.value = resultado1;
    }
    catch (e) { }
}

function Suma2() {
    var arqueoMonto1 = document.calculadora.arqueoMonto1.value;
    var arqueoMonto2 = document.calculadora.arqueoMonto2.value;

    var Rbilletestotal = document.calculadora.Rbilletestotal.value; // total arqueo de efectivo
    var arqueoTotal = document.calculadora.arqueoTotal.value; // total arqueo de valores
    var comprobantetotal = document.calculadora.comprobantetotal.value; // total arqueo de comprobantes

    var resultado1 = 0; // total final

    try {
        arqueoMonto1 = (isNaN(parseFloat(arqueoMonto1))) ? 0 : parseFloat(arqueoMonto1);
        arqueoMonto2 = (isNaN(parseFloat(arqueoMonto2))) ? 0 : parseFloat(arqueoMonto2);
        arqueoTotal = (isNaN(parseFloat(arqueoTotal))) ? 0 : parseFloat(arqueoTotal);
        Rbilletestotal = (isNaN(parseFloat(Rbilletestotal))) ? 0 : parseFloat(Rbilletestotal);
        resultado1 = (isNaN(parseFloat(resultado1))) ? 0 : parseFloat(resultado1);

        arqueoTotal = arqueoMonto1 + arqueoMonto2;
        resultado1 = Rbilletestotal + arqueoTotal + comprobantetotal; // siempre sumo a los 3 totales

        document.calculadora.arqueoTotal.value = arqueoTotal;
        document.calculadora.resultado1.value = resultado1;
    }
    catch (e) { }
}

function Suma3() {
    var comprobantemonto1 = document.calculadora.comprobantemonto1.value;
    var comprobantemonto2 = document.calculadora.comprobantemonto2.value;

    var Rbilletestotal = document.calculadora.Rbilletestotal.value; // total arqueo de efectivo
    var arqueoTotal = document.calculadora.arqueoTotal.value; // total arqueo de valores
    var comprobantetotal = document.calculadora.comprobantetotal.value; // total arqueo de comprobantes

    var resultado1 = 0; // total final

    try {
        comprobantemonto1 = (isNaN(parseFloat(comprobantemonto1))) ? 0 : parseFloat(comprobantemonto1);
        comprobantemonto2 = (isNaN(parseFloat(comprobantemonto2))) ? 0 : parseFloat(comprobantemonto2);
        Rbilletestotal = (isNaN(parseFloat(Rbilletestotal))) ? 0 : parseFloat(Rbilletestotal);
        arqueoTotal = (isNaN(parseFloat(arqueoTotal))) ? 0 : parseFloat(arqueoTotal);
        comprobantetotal = (isNaN(parseFloat(comprobantetotal))) ? 0 : parseFloat(comprobantetotal);
        resultado1 = (isNaN(parseFloat(resultado1))) ? 0 : parseFloat(resultado1);

        comprobantetotal = comprobantemonto1 + comprobantemonto2;
        resultado1 = Rbilletestotal + arqueoTotal + comprobantetotal; // siempre sumo a los 3 totales

        document.calculadora.comprobantetotal.value = comprobantetotal;
        document.calculadora.resultado1.value = resultado1;
    }
    catch (e) { }
}
<form class="needs-validation" name="calculadora" method="post" action="gracias.php" novalidate>
  <hr class="my-4">
  <div class="container">
    <div class="title-primary">Arqueo de Efectivo</div>
  </div>

  <div class="container">
    <table class="table table-striped" width="67%" border="0" align="center" cellpadding="4" cellspacing="4">
      <tbody>
        <tr>
          <td width="28%" align="right">
            <input style="width: 60px; float: right; text-align: center" type="number" name="billetes1" value='' onkeyup="Suma1()">
          </td>
          <td width="6%" align="right">1000</td>
          <td width="66%">
            <input type="number" name="Rbilletes1" value='' placeholder="0.00" disabled>
          </td>
        </tr>
        <tr>
          <td width="28%" align="right">
            <input style="width: 60px; float: right; text-align: center" type="number" name="billetes2" value='' onkeyup="Suma1()">
          </td>
          <td width="6%" align="right">500</td>
          <td width="66%">
            <input type="number" name="Rbilletes2" value='' placeholder="0.00" disabled>
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td align="right">Total</td>
          <td>
            <input type="number" name="Rbilletestotal" id="Rbilletestotal" step='0.01' value='' placeholder="0.00" disabled>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!--##################   ARQUEO DE VALORES ########################-->
  <hr class="my-4">
  <div class="container">
    <div class="title-primary">Arqueo de Valores</div>
  </div>
  <div class="container">
    <table class="table table-striped" width="67%" border="0" align="center" cellpadding="4" cellspacing="4">
      <tbody>
        <tr>
          <td width="23%" align="center">Banco</td>
          <td width="14%" align="center">Vencimiento</td>
          <td width="22%" align="center"> Cliente</td>
          <td width="23%" align="center">Numero</td>
          <td width="18%">Monto</td>
        </tr>
        <tr>
          <td width="23%" align="center">
            <select class="form-select" id="arqueoBanco1" name="arqueoBanco1" required>
              <option value="" disabled selected hidden></option>
              <option value="Daniela Piazza">Macro</option>
              <option value="Gisella Rocchi">ICBC</option>
              <option value="Christian Misetich">Santander</option>
              <option value="Christian Misetich">Galicia</option>
            </select>
          </td>
          <td width="14%" align="center">
            <input type="date" name="arqueoFecha1" value='' id="arqueoFecha1">
          </td>
          <td width="22%" align="center">
            <input type="text" name="arqueoCliente1" value='' id="arqueoCliente1">
          </td>
          <td width="23%" align="center">
            <input type="number" name="arqueoNumero1" value='' id="arqueoNumero1">
          </td>
          <td width="18%">
            <input type="number" name="arqueoMonto1" value='' placeholder="0.00" id="arqueoMonto1" onkeyup="Suma2()">
          </td>
        </tr>
        <tr>
          <td width="23%" align="center">
            <select class="form-select" id="arqueoBanco2" name="arqueoBanco2" required>
              <option value="" disabled selected hidden></option>
              <option value="Daniela Piazza">Macro</option>
              <option value="Gisella Rocchi">ICBC</option>
              <option value="Christian Misetich">Santander</option>
              <option value="Christian Misetich">Galicia</option>
            </select>
          </td>
          <td width="14%" align="center">
            <input type="date" name="arqueoFecha2" value='' id="arqueoFecha2">
          </td>
          <td width="22%" align="center">
            <input type="text" name="arqueoCliente2" value='' id="arqueoCliente2">
          </td>
          <td width="23%" align="center">
            <input type="number" name="arqueoNumero2" value='' id="arqueoNumero2">
          </td>
          <td width="18%">
            <input type="number" name="arqueoMonto2" value='' placeholder="0.00" id="arqueoMonto2" onkeyup="Suma2()">
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td align="right">&nbsp;</td>
          <td>&nbsp;</td>
          <td align="right">Total</td>
          <td>
            <input type="number" name="arqueoTotal" id="arqueoTotal" step='0.01' value='' placeholder="0.00" disabled>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!--##################   ARQUEO DE COMPROBANTES ########################-->
  <hr class="my-4">
  <div class="container">
    <div class="title-primary">Arqueo de Comprobantes</div>
  </div>
  <div class="container">
    <table class="table table-striped" width="67%" border="0" align="center" cellpadding="4" cellspacing="4">
      <tbody>
        <tr>
          <td width="23%" align="center">Fecha</td>
          <td width="14%" align="center">Cliente</td>
          <td width="23%" align="center">Numero</td>
          <td width="18%">Monto</td>
        </tr>
        <tr>
          <td align="center"><input type="date" name="comprobantefecha1" value='' id="comprobantefecha1"></td>
          <td align="center"><input type="text" name="comprobantecliente1" value='' id="arqueoCliente6"></td>
          <td align="center"><input type="number" name="comprobantenumero1" value='' id="comprobantenumero1">
          </td>
          <td>
            <input type="number" name="comprobantemonto1" value='' placeholder="0.00" id="comprobantemonto1" onkeyup="Suma3()">
          </td>
        </tr>
        <tr>
          <td align="center"><input type="date" name="comprobantefecha2" value='' id="arqueoFecha7"></td>
          <td align="center"><input type="text" name="comprobantecliente2" value='' id="arqueoCliente7"></td>
          <td align="center"><input type="number" name="comprobantenumero2" value='' id="arqueoNumero6"></td>
          <td>
            <input type="number" name="comprobantemonto2" value='' placeholder="0.00" id="arqueoMonto6" onkeyup="Suma3()">
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td align="right">&nbsp;</td>
          <td align="right">Total</td>
          <td>
            <input type="number" name="comprobantetotal" id="comprobantetotal" step='0.01' value='' placeholder="0.00" disabled>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="container">
    <div class="title-primary">TOTAL GENERAL</div>
  </div>
  <div class="container">
    <table class="table table-striped" width="80%" border="0" align="center" cellpadding="4" cellspacing="4">
      <tbody>
        <tr>
          <td width="312">&nbsp;</td>
          <td width="198">&nbsp;</td>
          <td width="410"></td>
        </tr>
        <tr>
          <td><strong>TOTAL GENERAL:</strong></td>
          <td>
            <input type="number" name="resultado1" step='0.01' value='0.00' placeholder='0.00' id="resultado1" disabled>
          </td>
      </tbody>
    </table>
  </div>

  <div style="height: 10px;"></div>
  <div class="text-center">
    <button class="btn btn-primary btn-lg" type="submit">ENVIAR</button>
  </div>
  <div style="height: 100px;"></div>
</form>

Puedes tener una mejor vista en éste enlace. Si hay algún inconveniente, me lo haces saber.

1
  • 1
    Muchas gracias Cris223511.dev la verdad no me había percatado, Tenes razón. Saludos Commented el 3 ene. 2023 a las 0:20

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.