1

Tengo que cambiar el fondo azul de un input text solo si este contiene un valor numérico, si no es así, ponerlo de color rosa, tengo que usar a fuerzas el método .each()

Index.html:

<div id=“proyecto”>
                    <input type="text" value=“hola”/>
                    <input type="text" value=“0987”/>
                    <input type="button" onclick="tarea1()"/>
</div>

Jquery:

function tarea1(){
 $(‘#proyecto’).each(function(indice){

    }
}

2 respuestas 2

3

Se me ocurre lo siguiente, agregar la clase "captura" a tus input de tipo texto, para hacer la busqueda por esta clase, luego validar por cada uno "each" si es un numero y asignes el color correspondiente.

Se agrego la validación en el caso de que el valor del input se deje en blanco.

function tarea1(){
 $('.captura').each(function(){
      
      if(isNaN(this.value) || this.value.trim()=='')//funcion para validar si es un numero
        $(this).css("background-color","pink");
      else
        $(this).css("background-color","#13C7FE");
    })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="proyecto">
                    <input type="text" class="captura" value="hola"/>
                    <input type="text" class="captura" value="0987"/>
                    <input type="button" value="Aceptar" onclick="tarea1()"/>
</div>

espero te sirva, saludos.

3
  • 1
    Hacen falta más validaciones quizá. Por ejemplo, si se deja en blanco lo asume como si hubiera un número y lo pone en azul. ¿Es ese el comportamiento deseado?
    – A. Cedano
    Commented el 14 sept. 2019 a las 15:37
  • es correcta la observación, para esa validación hace falta incluir que no se permita dejar el input vacio o que se valide el vacio como texto. Editare y agregare dicha validación, Gracias.
    – DMG
    Commented el 14 sept. 2019 a las 19:01
  • 1
    Está mejor ahora, pero, ¿por qué mejor en vez de hacer esto ` if(isNaN(this.value) || this.value.trim()=='')` no limpias con trim() y guardas el dato en una variable y la usas para comparar? A mi me gusta molestar al código, poniendolo en situaciones difíciles. Por ejemplo si yo escribo [espacio] 2, tu código me lo asume como un número, pero en realidad es una cadena compuesta por un espacio y el número dos.
    – A. Cedano
    Commented el 14 sept. 2019 a las 20:56
2

Tengo la respuesta para este codigo:

Su explicacion es la siguiente:

1) Se ha separado el input que sirve de boton para ejecutar la funcion tarea1() del bloque DIV por razones de organizacion.

2) El recorrido se hace por medio de contar los elementos que existe en la pagina que contentan con el atributo y tipo especifico:

$('input[type="text"]').each(function(){

3) Se toma el valor de cada etiqueta recorrida con:

var valor = $(this).val();

4) La siguente condicion if() tiene un comando Jquery que evalua el contenido, si es numerico el resultado es TRUE de lo contrario sale FALSE

if ($.isNumeric(valor)) {

5) Se asigna un color azul de fondo para la etiqueta input que tenga el valor numerico. (solo numerico)

$(this).css("background-color", "blue");

6) Se asigna un color rosa para la etiqueta input que tenga un valor diferente al numerio / alfabetico (si es alfanumerico tambien es considerado)

$(this).css("background-color", "pink");

7) muesta el numero de item leido

console.log(e);

Para su ejemplo ejecutado:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input {
            display: flex;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div id="proyecto">
        <input type="text" value="hola"/>
        <input type="text" value="0987"/>
    </div>
         <br>
         <input type="button" value="identificar" onclick="tarea1()"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function tarea1(){
        
         $('input[type="text"]').each(function(e){
               var valor = $(this).val();
               if ($.isNumeric(valor)) {
                  $(this).css("background-color", "blue");
               } else {
                $(this).css("background-color", "pink");
               }
               console.log(e);
            });
         
        };

    </script>
</body>
</html>

Espero que sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.