0

Cordial saludo, quiero poder aplicar la operación y redondeo que realizan las funcionesrestar_entradasyrestar_entradas2(); sin tener que declarar mas de una función, es decir, que con una sola función se aplique este proceso a varios campos. estuve revisando con el método addEventListener pero no pude realizarlo.

SCRIPT

$(document).on('ready', constructor);
function constructor()
{
    function restar_entradas();
    function restar_entradas2(); 
}

function restar_entradas()
{
    $('#contenido').on('change', '#CALI_VERIFICAR1, #PATRON1', function(){
        var num1 = parseFloat($('#CALI_VERIFICAR1').val());
        var num2 = parseFloat ($('#PATRON1').val());
        var total = (num1 - num2);       
        var resultado = Math.round(total*100)/100;
        $('#DIFERENCIA1').val(resultado);

        if(isNan(num1))//Con esto quiero poder hacer que si no hay numero lo tome como 0 y no me muestre Nan, pero no funciona
        {
            num1=0;
        }

        if(isNan(num2))//Con esto quiero poder hacer que si no hay numero lo tome como 0 y no me muestre Nan, pero no funciona
        {
           num2=0;
        }
    })
}

function restar_entradas2()
{
    $('#contenido').on('change', '#CALI_VERIFICAR2, #PATRON2', function(){
        var num1 = parseFloat($('#CALI_VERIFICAR2').val());
        var num2 = parseFloat ($('#PATRON2').val());
        var total = (num1 - num2);       
        var resultado = Math.round(total*100)/100;
        $('#DIFERENCIA2').val(resultado);

        if(isNan(num1))//Con esto quiero poder hacer que si no hay numero lo tome como 0 y no me muestre Nan, pero no funciona
        {
            num1=0;
        }

        if(isNan(num2))//Con esto quiero poder hacer que si no hay numero lo tome como 0 y no me muestre Nan, pero no funciona
        {
           num2=0;
        }
    })
}

HTML

<table id="contenido">
<td><input type="text" name="PATRON1" id="PATRON1" value=""></td>
<td><input type="text" name="CALI_VERIFICAR1" id="CALI_VERIFICAR1"></td>
<td><input type="text" name="DIFERENCIA1" id="DIFERENCIA1"></td>

<td><input type="text" name="PATRON2" id="PATRON2" value=""></td>
<td><input type="text" name="CALI_VERIFICAR2" id="CALI_VERIFICAR2"></td>
<td><input type="text" name="DIFERENCIA2" id="DIFERENCIA2"></td>
</table>
10
  • Quien es #contenido? un input, un select, un radio o que? Commented el 1 mar. 2018 a las 13:05
  • es el nombre de la tabla, ya lo edite
    – Anderviver
    Commented el 1 mar. 2018 a las 13:08
  • El evento debería ejecutarse únicamente cuando cambie el valor de CALI_VERIFICAR1 y CALI_VERIFICAR2 no? no entiendo por que seleccionas también PATRON1 y PATRON2 en el change Commented el 1 mar. 2018 a las 13:36
  • Si lo dices por el valor de PATRON1 a veces puede cambiar, ya edito la pregunta.
    – Anderviver
    Commented el 1 mar. 2018 a las 13:43
  • Tienes un error de sintaxis aquí: $function constructor().. deberías ponerlo sin el dólar. Commented el 1 mar. 2018 a las 13:46

2 respuestas 2

1

realmente tu código se podía mejorar mucho:

  1. No era necesario agregar una función por cada selector que estabas haciendo, y luego llamarla en el ready, todo esto se puede omitir.

  2. En esta línea tienes dos errores de sintaxis:

    $function constructor(){
        function restar_entradas();
        function restar_entradas2(); 
    }
    

El primero es el signo $ antes de function, el segundo es el ; al final de cada línea donde estás intentando ejecutar las otras funciones, ¿Por qué? por que al agregar la palabra reservada function el sistema va a creer que vas a declarar una función nueva por lo cual no espera un ;....recuerda que para ejecutar una función ya declarada basta únicamente con copiar su nombre seguido de () por ej: restar_entradas();

  1. Ahora para hacer tu función dinámica sin importar la cantidad de campos tendríamos que editar un poco la estructura de tu tabla y agregar <tr> (de todas formas esa es la estructura que debe tener una tabla).

Ejemplo funcional

$(document).ready(function(){
    $('#contenido').on('change', '.patron, .verificar', function(){
        var num1 = $(this).closest('tr').find('.verificar').val() == '' ? 0 : $(this).closest('tr').find('.verificar').val();
        var num2 = $(this).closest('tr').find('.patron').val() == '' ? 0 : $(this).closest('tr').find('.patron').val();

        var total = (parseFloat(num1) - parseFloat(num2));
        var resultado = Math.round(total*100)/100;
        
        $(this).closest('tr').find('.diferencia').val(resultado);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="contenido">
    <tr>
        <td><input type="text" name="PATRON1" id="PATRON1" value="14,2" class="patron"></td>
        <td><input type="text" name="CALI_VERIFICAR1" id="CALI_VERIFICAR1" class="verificar"></td>
        <td><input type="text" name="DIFERENCIA1" id="DIFERENCIA1" class="diferencia"></td>
    </tr>
    
    <tr>
        <td><input type="text" name="PATRON2" id="PATRON2" value="14,2" class="patron"></td>
        <td><input type="text" name="CALI_VERIFICAR2" id="CALI_VERIFICAR2" class="verificar"></td>
        <td><input type="text" name="DIFERENCIA2" id="DIFERENCIA2" class="diferencia"></td>
    </tr>
</table>

1

Esta es una solución posible. Es mucho más sencilla que tu código, y le he intercalado comentarios que explican algunas particularidades, pero si tienes alguna duda pregúntame.

$(document).on('ready', constructor);
function constructor()
{
  /**
   * Sin necesidad de funciones extra, aplicamos este evento a todos
   * los inputs que no sean 'readonly' (asumo que no quieres que
   * nadie edite manualmente los cmapos "DIFERENCIA", así que he
   * añadido ese tag al html
   */
  $('#contenido input:not([readonly])').change( function (e) {
    // Lo otro que he añadido al html es un campo "data-id", 
    // con valor 1 ó 2 dependiendo de a qué grupo pertenezca.
    // No es la única forma de hacerlo, pero es práctica y fácil.
    let id = $(this).data('id'); 
    if(!id) return; // Prevención de errores
    
    let num1 = parseFloat( $('#CALI_VERIFICAR'+id).val() );
    let num2 = parseFloat( $('#PATRON'+id).val() );
    var resultado = Math.round((num2-num1)*100)/100 || 0; // El "||0" final viene a decir que si resultado evalúa falso, entonces 0.
    $('#DIFERENCIA'+id).val(resultado);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="contenido">
<td><input type="text" name="PATRON1" id="PATRON1" value="" data-id=1></td>
<td><input type="text" name="CALI_VERIFICAR1" id="CALI_VERIFICAR1" data-id=1></td>
<td><input type="text" name="DIFERENCIA1" id="DIFERENCIA1" readonly></td>

<td><input type="text" name="PATRON2" id="PATRON2" value="" data-id=2></td>
<td><input type="text" name="CALI_VERIFICAR2" id="CALI_VERIFICAR2" data-id=2></td>
<td><input type="text" name="DIFERENCIA2" id="DIFERENCIA2" readonly></td>
</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.