• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

127
Vistas
Js funciona definitivamente en el mismo código con expresiones regulares

Acabo de encontrarme con un caso interesante en el que no entiendo por qué este código funciona así. Pasos para reproducir:

  1. Copie el correo del div existente que codifiqué
  2. Insertar en el campo de correo electrónico
  3. Haga clic una o dos veces en el botón "Agregar"

Esperado:

Se deberían haber agregado nuevos divs sin resaltar la entrada

Actual:

Agrega un nuevo div pero la segunda vez resalta el campo de entrada

¿Por qué? Traté de registrar esos valores pero aún no entiendo MIRA EL EJEMPLO COMPLETO EN

 const el = document.getElementById('emails'); const input = document.getElementById('input') let reg = /^(\w|\-)+@[a-zA-Z0-9][-_.}?+[a-zA-Z]+\.[az]{2,4}$/gi let prevVal = input.value; function myFunction() { const inputVal = input.value; const isInvalid = !reg.test(inputVal); console.log('val:', inputVal, isInvalid, prevVal === inputVal) if (isInvalid) { console.log('Wrong email'); input.style.borderColor = 'red'; } else { const newDiv = document.createElement('div'); newDiv.innerText = inputVal; newDiv.classList.add('email') el.appendChild(newDiv); } prevVal = inputVal }
 button { border: 2px solid black; border-radius: 10px; padding: 10px 40px; cursor: pointer; } .email { border: 2px solid black; padding: 5px 8px; margin: 10px 0; cursor: pointer; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="stylejs.css"> </head> <body> <div> <input type="text" id="input"> <button onclick="myFunction()">ADD</button> <!-- inputs --> <div id="emails"> <div class="email">mail@mail.ru</div> </div> </div> <script src="indexjs.js"></script> </body> </html>

almost 3 years ago · Santiago Gelvez
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda