Problema con decimales al hacer operaciones matemáticas

erpakillo · #1 (**permalink**) 08/01/2016, 11:17

Hola, tengo el siguiente problema. Estoy calculando con javascript lo que cuesta cada trabajador según las horas que haya trabajado. Después, al final, estoy sumando el total de horas y el total de importe de todos los trabajadores. El problema es el siguiente: los números enteros van perfectos, pero al ponerle decimales en el campo horas (el campo costeporhora está tomado desde la BD y tiene dos decimales) sale el resultado de la operación bien pero con muchos decimales, y entonces no me hace bien el calculo en el campo de total horas y total importe horas.¿Como puedo hacer para limitar el resultado de dichos campos a dos decimales? ¿O como puedo hacer que calcule teniendo tantos decimales? gracias por ayudarme.

este es el formulario donde se introducen los datos y donde se muestran los resultados:

Código PHP:

 
           <table width="914" border="0">

              <tbody>

    <tr>

      <td width="17">Gastos de pintura:</td>

      <td width="11"><input name="gastospintura" type="text" id="gastospintura" onKeyUp="sumar2();" /></td>

      

    </tr>

    <tr>

      <td>Gastos de recambios:</td>

      <td><input name="gastosrecambios" type="text" id="gastosrecambios" onKeyUp="sumar2();"/></td>

     

    </tr>

    <tr>

      <td><h3>Puesto</h3></td>

      <td><h3>Trabajador</h3></td>

      <td><h3>Coste por hora</h3></td>

      <td><h3>Horas</h3></td>

      <td><h3>Total Trabajador</h3></td>

     

    </tr>

    <tr>

      <td bgcolor="#2E2EFE"><input name="puestotrabajador1" readonly type="text" id="puestotrabajador1"   value="<?php echo $tra1['puesto']?>" /></td>

      <td bgcolor="#2E2EFE"><input name="trabajador1" readonly type="text" id="trabajador1"   value="<?php echo $tra1['nombre']?>" /></td>

      <td><input name="costehoratrabajador1" style="width:80px" readonly onKeyUp="sumartrab1();" type="number" id="costehoratrabajador1"  value="<?php echo $tra1['costehora']?>" /></td>

      <td><input name="horastrabajador1" style="width:80px" type="number" onmouseout="sumarhoras();"onKeyUp="sumartrab1();"id="horastrabajador1" /></td>

      <td><input name="totaltrabajador1" type="number" id="totaltrabajador1"  onmouseout="importetotalhoras();"/></td>

    </tr>

    <tr>

      <td bgcolor="#2E2EFE"><input name="puestotrabajador9" readonly type="text" id="puestotrabajador9"   value="<?php echo $tra9['puesto']?>" /></td>

      <td bgcolor="#2E2EFE"><input name="trabajador9" readonly type="text" id="trabajador9"   value="<?php echo $tra9['nombre']?>" /></td>

      <td><input name="costehoratrabajador9" style="width:80px" readonly onKeyUp="sumartrab9();" type="number" id="costehoratrabajador9"  value="<?php echo $tra9['costehora']?>"  /></td>

          <td><input name="horastrabajador9" onmouseout="sumarhoras();" style="width:80px" type="number" onKeyUp="sumartrab9();" id="horastrabajador9" /></td>

      <td><input name="totaltrabajador9" type="number" id="totaltrabajador9"  onmouseout="importetotalhoras();"/></td>     

    </tr>

    <tr>

      <td bgcolor="#6E6E6E"><input name="puestotrabajador3" readonly type="text" id="puestotrabajador3"   value="<?php echo $tra3['puesto']?>" /></td>

      <td bgcolor="#6E6E6E"><input name="trabajador3" readonly type="text" id="trabajador3"   value="<?php echo $tra3['nombre']?>" /></td>

      <td><input name="costehoratrabajador3" style="width:80px" readonly onKeyUp="sumartrab3();" type="number" id="costehoratrabajador3"  value="<?php echo $tra3['costehora']?>" /></td>

      <td><input name="horastrabajador3" style="width:80px" type="number" onKeyUp="sumartrab3();" id="horastrabajador3" /></td>

      <td><input name="totaltrabajador3" type="number" id="totaltrabajador3"  onmouseout="importetotalhoras();"/></td>    

    </tr>

    <tr>

      <td bgcolor="#6E6E6E"><input name="puestotrabajador4" readonly type="text" id="puestotrabajador4"   value="<?php echo $tra4['puesto']?>" /></td>

      <td bgcolor="#6E6E6E"><input name="trabajador4" readonly type="text" id="trabajador4"   value="<?php echo $tra4['nombre']?>" /></td>

      <td><input name="costehoratrabajador4" style="width:80px" readonly onKeyUp="sumartrab4();" type="number" id="costehoratrabajador4"  value="<?php echo $tra4['costehora']?>" /></td>

         <td><input name="horastrabajador4" style="width:80px" type="number" onKeyUp="sumartrab4();" id="horastrabajador4" /></td>

      <td><input name="totaltrabajador4" type="number" id="totaltrabajador4"  onmouseout="importetotalhoras();"/></td>     

    </tr>

    <tr>

      <td bgcolor="#6E6E6E"><input name="puestotrabajador2" readonly type="text" id="puestotrabajador2"   value="<?php echo $tra2['puesto']?>" /></td>

      <td bgcolor="#6E6E6E"><input name="trabajador2" readonly type="text" id="trabajador2"   value="<?php echo $tra2['nombre']?>" /></td>

      <td><input name="costehoratrabajador2" style="width:80px" readonly onKeyUp="sumartrab2();" type="number" id="costehoratrabajador2"  value="<?php echo $tra2['costehora']?>" /></td>

       <td><input name="horastrabajador2" style="width:80px" type="number" onKeyUp="sumartrab2();" id="horastrabajador2" /></td>

      <td><input name="totaltrabajador2" type="number" id="totaltrabajador2"  onmouseout="importetotalhoras();"/></td>     

    </tr>

    <tr>

      <td bgcolor="#6E6E6E"><input name="puestotrabajador10" readonly type="text" id="puestotrabajador10"   value="<?php echo $tra10['puesto']?>" /></td>

      <td bgcolor="#6E6E6E"><input name="trabajador10" readonly type="text" id="trabajador10"   value="<?php echo $tra10['nombre']?>" /></td>

      <td><input name="costehoratrabajador10" style="width:80px" readonly onKeyUp="sumartrab10();" type="number" id="costehoratrabajador10"  value="<?php echo $tra10['costehora']?>" /></td>

       <td><input name="horastrabajador10" style="width:80px" type="number" onKeyUp="sumartrab10();" id="horastrabajador10" /></td>

      <td><input name="totaltrabajador10" type="number" id="totaltrabajador10"  onmouseout="importetotalhoras();"/></td>     

    </tr>

    <tr>

      <td bgcolor="#DF0101"><input name="puestotrabajador5" readonly type="text" id="puestotrabajador5"   value="<?php echo $tra5['puesto']?>" /></td>

      <td bgcolor="#DF0101"><input name="trabajador5" readonly type="text" id="trabajador5"   value="<?php echo $tra5['nombre']?>" /></td>

      <td><input name="costehoratrabajador5" style="width:80px" readonly onKeyUp="sumartrab5();" type="number" id="costehoratrabajador5"  value="<?php echo $tra5['costehora']?>" /></td>

        <td><input name="horastrabajador5" style="width:80px" type="number" onKeyUp="sumartrab5();" id="horastrabajador5" /></td>

      <td><input name="totaltrabajador5" type="number" id="totaltrabajador5"  onmouseout="importetotalhoras();"/></td>     

    </tr>

    <tr>

      <td bgcolor="#DF0101"><input name="puestotrabajador6" readonly type="text" id="puestotrabajador6"   value="<?php echo $tra6['puesto']?>" /></td>

      <td bgcolor="#DF0101"><input name="trabajador6" readonly type="text" id="trabajador6"   value="<?php echo $tra6['nombre']?>" /></td>

      <td><input name="costehoratrabajador6" style="width:80px" readonly onKeyUp="sumartrab6();" type="number" id="costehoratrabajador6"  value="<?php echo $tra6['costehora']?>" /></td>

        <td><input name="horastrabajador6" style="width:80px" type="number" onKeyUp="sumartrab6();" id="horastrabajador6" /></td>

      <td><input name="totaltrabajador6" type="number" id="totaltrabajador6"  onmouseout="importetotalhoras();"/></td>    

    </tr>

    <tr>

      <td bgcolor="#DF0101"><input name="puestotrabajador7" readonly type="text" id="puestotrabajador7"   value="<?php echo $tra7['puesto']?>" /></td>

      <td bgcolor="#DF0101"><input name="trabajador7" readonly type="text" id="trabajador7"   value="<?php echo $tra7['nombre']?>" /></td>

      <td><input name="costehoratrabajador7" style="width:80px" readonly onKeyUp="sumartrab7();" type="number" id="costehoratrabajador7"  value="<?php echo $tra7['costehora']?>" /></td>

        <td><input name="horastrabajador7" style="width:80px" type="number" onKeyUp="sumartrab7();" id="horastrabajador7" /></td>

      <td><input name="totaltrabajador7" type="number" id="totaltrabajador7"  onmouseout="importetotalhoras();"/></td>    

    </tr>

    <tr>

      <td bgcolor="#DF0101"><input name="puestotrabajador8" readonly type="text" id="puestotrabajador8"   value="<?php echo $tra8['puesto']?>" /></td>

      <td bgcolor="#DF0101"><input name="trabajador8" readonly type="text" id="trabajador8"   value="<?php echo $tra8['nombre']?>" /></td>

      <td><input name="costehoratrabajador8" style="width:80px" readonly onKeyUp="sumartrab8();" type="number" id="costehoratrabajador8"  value="<?php echo $tra8['costehora']?>" /></td>

         <td><input name="horastrabajador8" style="width:80px" type="number" onKeyUp="sumartrab8();" id="horastrabajador8" /></td>

      <td><input name="totaltrabajador8" type="number" id="totaltrabajador8" onmouseout="importetotalhoras();"/></td>   

    </tr>

       <tr>

      <td bgcolor="#2E2EFE" >Pintores</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>   

    </tr>

    <tr>

      <td bgcolor="#6E6E6E">Chapistas</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td><h3>Total horas:</h3></td>

      <td><h3>Importe Total Horas:</h3></td>

     

    </tr>

    <tr>

      <td bgcolor="#DF0101">Montadores</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td><input name="totalhoras" type="number" style="width:80px" id="totalhoras" /></td>

      <td><input name="importetotalhoras" type="number" id="importetotalhoras" onmouseout="sumar2();"/></td>   

    </tr>

        <tr>

      <td><h3>Total gastos reparación:</h3></td>

      <td><input name="importetotalgastos" type="number" id="importetotalgastos"/></td>  

    </tr>

  </tbody>

</table>

Pongo debajo en un comentario las funciones javascript para que quepa todo.

erpakillo · #2 (**permalink**) 08/01/2016, 11:18

Y estas son las diferentes funciones javascript que utilizo para calcular primero el precio de las horas trabajadas, y después la suma del total de horas y del total del importe de las horas.

Código PHP:

  function sumarhoras() { 

 var totalhoras=verificar("totalhoras"); 

 var horastrabajador1=verificar("horastrabajador1"); 

 var horastrabajador2=verificar("horastrabajador2");

 var horastrabajador3=verificar("horastrabajador3");

 var horastrabajador4=verificar("horastrabajador4");

 var horastrabajador5=verificar("horastrabajador5");

 var horastrabajador6=verificar("horastrabajador6");

 var horastrabajador7=verificar("horastrabajador7");

 var horastrabajador8=verificar("horastrabajador8");

 var horastrabajador9=verificar("horastrabajador9");

 var horastrabajador10=verificar("horastrabajador10");

 

   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("totalhoras").value=parseFloat(horastrabajador1)+parseFloat(horastrabajador2)+parseFloat(horastrabajador3)+parseFloat(horastrabajador4)+parseFloat(horastrabajador5)+parseFloat(horastrabajador6)+parseFloat(horastrabajador7)+parseFloat(horastrabajador8)+parseFloat(horastrabajador9)+parseFloat(horastrabajador10); 

   

  } 

  function sumartrab1() { 

 var costehoratrabajador1=verificar("costehoratrabajador1"); 

 var horastrabajador1 =verificar("horastrabajador1");

 var totaltrabajador1=verificar("totaltrabajador1"); 

 
   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("totaltrabajador1").value=parseFloat(horastrabajador1)*parseFloat(costehoratrabajador1); 

   

  } 

    function sumartrab2() { 

 var costehoratrabajador2=verificar("costehoratrabajador2"); 

 var horastrabajador2 =verificar("horastrabajador2");

 var totaltrabajador2=verificar("totaltrabajador2"); 

 
   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("totaltrabajador2").value=parseFloat(horastrabajador2)*parseFloat(costehoratrabajador2); 

   

  } 

    function sumartrab3() { 

 var costehoratrabajador3=verificar("costehoratrabajador3"); 

 var horastrabajador3 =verificar("horastrabajador3");

 var totaltrabajador3=verificar("totaltrabajador3"); 

 
   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("totaltrabajador3").value=parseFloat(horastrabajador3)*parseFloat(costehoratrabajador3); 

   

  } 

    function sumartrab4() { 

 var costehoratrabajador4=verificar("costehoratrabajador4"); 

 var horastrabajador4 =verificar("horastrabajador4");

 var totaltrabajador4=verificar("totaltrabajador4"); 

 
   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("totaltrabajador4").value=parseFloat(horastrabajador4)*parseFloat(costehoratrabajador4); 

   

  } 

    function sumartrab5() { 

 var costehoratrabajador5=verificar("costehoratrabajador5"); 

 var horastrabajador5 =verificar("horastrabajador5");

 var totaltrabajador5=verificar("totaltrabajador5"); 

 
   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("totaltrabajador5").value=parseFloat(horastrabajador5)*parseFloat(costehoratrabajador5); 

   

  }

    function sumartrab6() { 

 var costehoratrabajador6=verificar("costehoratrabajador6"); 

 var horastrabajador6 =verificar("horastrabajador6");

 var totaltrabajador6=verificar("totaltrabajador6"); 

 
   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("totaltrabajador6").value=parseFloat(horastrabajador6)*parseFloat(costehoratrabajador6); 

   

  }  

    function sumartrab7() { 

 var costehoratrabajador7=verificar("costehoratrabajador7"); 

 var horastrabajador7 =verificar("horastrabajador7");

 var totaltrabajador7=verificar("totaltrabajador7"); 

 
   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("totaltrabajador7").value=parseFloat(horastrabajador7)*parseFloat(costehoratrabajador7); 

   

  } 

    function sumartrab8() { 

 var costehoratrabajador8=verificar("costehoratrabajador8"); 

 var horastrabajador8 =verificar("horastrabajador8");

 var totaltrabajador8=verificar("totaltrabajador8"); 

 
   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("totaltrabajador8").value=parseFloat(horastrabajador8)*parseFloat(costehoratrabajador8); 

   

  } 

    function sumartrab9() { 

 var costehoratrabajador9=verificar("costehoratrabajador9"); 

 var horastrabajador9 =verificar("horastrabajador9");

 var totaltrabajador9=verificar("totaltrabajador9"); 

 
   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("totaltrabajador9").value=parseFloat(horastrabajador9)*parseFloat(costehoratrabajador9); 

   

  } 

    function sumartrab10() { 

 var costehoratrabajador10=verificar("costehoratrabajador10"); 

 var horastrabajador10 =verificar("horastrabajador10");

 var totaltrabajador10=verificar("totaltrabajador10"); 

 
   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("totaltrabajador10").value=parseFloat(horastrabajador10)*parseFloat(costehoratrabajador10); 

   

  } 

      function importetotalhoras() { 

 var importetotalhoras =verificar("importetotalhoras");

 var totaltrabajador1=verificar("totaltrabajador1"); 

 var totaltrabajador2=verificar("totaltrabajador2"); 

  var totaltrabajador3=verificar("totaltrabajador3"); 

   var totaltrabajador4=verificar("totaltrabajador4"); 

    var totaltrabajador5=verificar("totaltrabajador5"); 

     var totaltrabajador6=verificar("totaltrabajador6"); 

      var totaltrabajador7=verificar("totaltrabajador7"); 

       var totaltrabajador8=verificar("totaltrabajador8"); 

        var totaltrabajador9=verificar("totaltrabajador9"); 

                 var totaltrabajador10=verificar("totaltrabajador10");

     

 
   // realizamos la suma de los valores y los ponemos en la casilla del 

 // formulario que contiene el total

 document.getElementById("importetotalhoras").value=parseFloat(totaltrabajador1)+parseFloat(totaltrabajador2)+parseFloat(totaltrabajador3)+parseFloat(totaltrabajador4)+parseFloat(totaltrabajador5)+parseFloat(totaltrabajador6)+parseFloat(totaltrabajador7)+parseFloat(totaltrabajador8)+parseFloat(totaltrabajador9)+parseFloat(totaltrabajador10); 

   

  } 

 /** * Funcion para verificar los valores de los cuadros de texto. Si no es un * valor numerico, cambia de color el borde del cuadro de texto */

 function verificar(id) 

 { 

 var obj=document.getElementById(id);

  if(obj.value=="") 

  value="0"; 

  else

  value=obj.value; 

  if(validate_importe(value,2))

   {

   // marcamos como erroneo

    obj.style.borderColor="#808080"; 

    return value;

     }else{

      // marcamos como erroneo

       obj.style.borderColor="#f00";       

       return 0;                         

     } 

        }

         /** * Funcion para validar el importe * Tiene que recibir: 

         * El valor del importe (Ej. document.formName.operator) 

         * Determina si permite o no decimales [1-si|0-no] 

         * Devuelve: 

         * true-Todo correcto 

         * false-Incorrecto 

         */

         function validate_importe(value,decimal)

          { 

          if(decimal==undefined) 

          decimal=0; 

          if(decimal==2)

           {

            // Permite decimales tanto por . como por ,

             var patron=new RegExp("^[0-9]+((,|\.)[0-9]{1,2})?$"); 

             }else{

              // Numero entero normal

              var patron=new RegExp("^([0-9])*$")

               } 

               if(value && value.search(patron)==0) 

               { 

               return true; 

               } 

               return false;      

                }

Perdón por el tocho.

Alexis88 · #3 (**permalink**) 08/01/2016, 12:16

Utiliza el método .toFixed().

Un saludo

erpakillo · #4 (**permalink**) 11/01/2016, 01:08

Hola, gracias por tu respuesta. He estado mirando y no se donde debe ir puesto, ¿En que parte del código debo ponerlo para que lo haga? es que no llevo mucho tiempo con javascript. Gracias de nuevo.

kraneok · #5 (**permalink**) 11/01/2016, 06:52

Cita:

Iniciado por erpakillo

Hola, gracias por tu respuesta. He estado mirando y no se donde debe ir puesto, ¿En que parte del código debo ponerlo para que lo haga? es que no llevo mucho tiempo con javascript. Gracias de nuevo.

Hola, el método toFixed() puede ir detras de una variable que contenga un tipo nativo Number.

var nn = 2;
alert(nn.toFixed(2));

Esta sentencia sacará por pantalla 2.00

Saludos.

erpakillo · #6 (**permalink**) 14/01/2016, 01:59

Hola, el toFixed() no me sirve(o no se utilizarlo), siguen saliendo demasiados decimales en el resultado de la siguiente operacion y yo quiero que el resultado en totaltrabajador9 sea solo con dos decimales:

Código PHP:

      function sumartrab9() { 

 var costehoratrabajador9=verificar("costehoratrabajador9"); 

 var horastrabajador9 =verificar("horastrabajador9");

 var totaltrabajador9=verificar("totaltrabajador9"); 

 document.getElementById("totaltrabajador9").value=parseFloat(horastrabajador9)*parseFloat(costehoratrabajador9);   

   

  }

¿Donde debo ponerlo?

Muchas gracias

IsaBelM · #7 (**permalink**) 14/01/2016, 05:40

prueba así

Cita:

value=obj.value.toFixed(2);

Alexis88 · #8 (**permalink**) 14/01/2016, 15:15

Cita:

Iniciado por erpakillo

[...]quiero que el resultado en totaltrabajador9 sea solo con dos decimales[...]
¿Donde debo ponerlo?

Envuelve el resultado con paréntesis y adjunta el método con el número de decimales deseado:

Código Javascript:

Ver originaldocument.getElementById("totaltrabajador9").value = (parseFloat(horastrabajador9)*parseFloat(costehoratrabajador9)).toFixed(2);

Un saludo

IsaBelM · #9 (**permalink**) 15/01/2016, 07:10

no me dí cuenta de esto

Cita:

var totaltrabajador9=verificar("totaltrabajador9");
document.getElementById("totaltrabajador9").value=parseFloat(horastrabajador9)*parseFloat(c ostehoratrabajador9);

tener un elemento con la misma id que el nombre de una variable resulta ser una mala práctica. en este caso no hay conflicto, pero en otros puedes obtener resultados extraños como se debatió en este hilo