Acabo de encontrarme con un caso interesante en el que no entiendo por qué este código funciona así. Pasos para reproducir:
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>