Como comparar correctamente 2 valores con Javascript o Jquery?

Question

Resulta que estoy tratando de validar que un input no sea mayor a otro pero no funciona correctamente

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="application/javascript">
        function enviar() {
            let totalAnopheles = $('#totalAnopheles').val()
            let totalZancudos = $('#totalZancudos').val()
            if (totalAnopheles > totalZancudos) {
                console.log("error")
            } else {
                console.log('correcto')
            }

        }

    </script>

<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalZancudos">Total Zancudos:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalZancudos" name="totalZancudos" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalAnopheles">Total Anopheles:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalAnopheles" name="totalAnopheles" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<button onclick="enviar()">click</button>

la idea es que wl segundo input (Anopheles) no puede ser mayor a Zancudos

score 1 · Accepted Answer · answered Mar 09 '20 at 19:54

No estás capturando los valores de los input. Puedes usar val() para ello, ya que estás usando jQuery.

Por otra parte, si usas let el dato se quedará siempre con el primer valor que tenía el input cuando llamaste a la función. Convendría usar var, porque así el dato se evaluará con el valor que tenga en ese momento.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="application/javascript">
        function enviar() {
            var totalAnopheles = $('#totalAnopheles').val();
            var totalZancudos = $('#totalZancudos').val();
            if (totalAnopheles > totalZancudos) {
                console.log("error")
            } else {
                console.log('correcto')
            }

        }

    </script>

<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalZancudos">Total Zancudos:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalZancudos" name="totalZancudos" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalAnopheles">Total Anopheles:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalAnopheles" name="totalAnopheles" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<button onclick="enviar()">click</button>

ok pequeño detalle que olvidé, pero siempre me da error, si por ejemplo ingreso totalZancudos = 1, totalAnopheles = 10 dara error, pero siluego cambio totalZancudos =121 ,totalAnopheles=22 siempre cae en error — Igmer Rodriguez, Mar 09 '20 at 20:00
@IgmerRodriguez revisa la edición, debes cambiar `let` por `var` porque aquel te deja el valor fijo (el de la primera vez que se invocó la función). Sobre la diferencia de modificadores, [esto puede ayudar a entenderlo mejor](https://es.stackoverflow.com/q/106042/29967). — A. Cedano, Mar 09 '20 at 20:01

score 1 · Answer 2 · answered Mar 09 '20 at 20:48

Un pequeño detalle: al obtener con .val() los valores de cada campo, estás obteniendo cada valor como string (pese a que utilizás <input type="number">). Dos formas de convertir el valor que obtuviste a Number son:

Anteponer + (como lo dejo en el código),
convertirlo con parseInt()

quedando como resultado final:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="application/javascript">
        function enviar() {
            //ambos valores convertidos a Number:
            let totalAnopheles = +$('#totalAnopheles').val();
            let totalZancudos = +$('#totalZancudos').val();
            if (totalAnopheles > totalZancudos) {
                console.log("error")
            } else {
                console.log('correcto')
            }
        }
    </script>

<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalZancudos">Total Zancudos:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalZancudos" name="totalZancudos" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalAnopheles">Total Anopheles:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalAnopheles" name="totalAnopheles" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<button onclick="enviar()">click</button>

Como comparar correctamente 2 valores con Javascript o Jquery?

2 Answers2