Estoy tratando de agregar la clase ".contact__form-input--focused" a la entrada que se enfoca desde un formulario.
Estoy tratando de hacer eso agregando un detector de eventos a cada entrada, y luego, si ya tiene la clase, elimine esa clase de la lista de clases.
//INPUT ANIMATION const input = document.querySelectorAll("contact__form-input"); function addClass(input) { input.classList.add("contact__form-input--focused"); } function removeClass(input) { input.classList.remove("contact__form-input--focused"); } for (let i = 0; i < input.length; i++) { if (item[i].classList.contains("contact__form-input--focused")) { item.addEventListener("focus", addClass(input[i])); } else { item.addEventListener("blur", removeClass(input[i])); } } .contact__form { display: flex; flex-direction: column; } .contact__form-input { border: none; border-bottom: .1rem solid rgba(0, 0, 0, .12); font-size: var(--medium-font-size); margin: 0; padding: 4px 0; width: 100%; background: 0 0; text-align: left; color: inherit; } .contact__form-input--focused { /*some animations here*/ } <form class="contact__form" method="POST"> <label class="contact__form-label"> <span>Name</span> <input class="contact__form-input" name="Name" type="text" autocomplete="name" required> </label> <label class="contact__form-label"> <span>Phone number</span> <input class="contact__form-input" name="Phone number" type="tel" autocomplete="tel" required> </label> <label class="contact__form-label"> <span>Message</span> <input class="contact__form-input" type="text" required> </label> <button class="contact__form-button">Send</button> </form>si está usando JS como este y no solo el pseudo de :focus , puede hacerlo por
const inputs = document.querySelectorAll("contact__form-input"); inputs.forEach(input => { input.addEventListener("focus", function(){ this.classList.add("contact__form-input--focused"); }); input.addEventListener("blur", function(){ this.classList.remove("contact__form-input--focused"); }); });O si quieres cambiar de clase
const inputs = document.querySelectorAll("contact__form-input"); function switchInputClasses(){ this.classList.toggle("contact__form-input"); this.classList.toggle("contact__form-input--focused"); } inputs.forEach(input => { input.addEventListener("focus", switchInputClasses); input.addEventListener("blur", switchInputClasses); }); El motivo de las declaraciones de funciones y no ()=>{} se debe a que este último conservará el alcance y para configurar this palabra clave correctamente necesita cambiar los alcances, la mejor manera de pensar en ello es llamar a un EventListner a través de apply() en el elemento
El pseudo método es simplemente cambiar tu CSS para que sea
.contact__form { display: flex; flex-direction: column; } .contact__form-input { border: none; border-bottom: .1rem solid rgba(0, 0, 0, .12); font-size: var(--medium-font-size); margin: 0; padding: 4px 0; width: 100%; background: 0 0; text-align: left; color: inherit; } .contact__form-input:focus { /*some animations here*/ }No necesita la instrucción if . Simplemente agregue ambos detectores de eventos a todas las entradas.
El segundo argumento de addEventListener() debe ser una función. Está llamando a la función de inmediato, no cuando ocurre el evento.
//INPUT ANIMATION const input = document.querySelectorAll(".contact__form-input"); function addClass(input) { input.classList.add("contact__form-input--focused"); } function removeClass(input) { input.classList.remove("contact__form-input--focused"); } for (let i = 0; i < input.length; i++) { let item = input[i]; item.addEventListener("focus", () => addClass(item)); item.addEventListener("blur", () => removeClass(item)); } .contact__form { display: flex; flex-direction: column; } .contact__form-input { border: none; border-bottom: .1rem solid rgba(0, 0, 0, .12); font-size: var(--medium-font-size); margin: 0; padding: 4px 0; width: 100%; background: 0 0; text-align: left; color: inherit; } .contact__form-input--focused { background-color: yellow; } <form class="contact__form" method="POST"> <label class="contact__form-label"> <span>Name</span> <input class="contact__form-input" name="Name" type="text" autocomplete="name" required> </label> <label class="contact__form-label"> <span>Phone number</span> <input class="contact__form-input" name="Phone number" type="tel" autocomplete="tel" required> </label> <label class="contact__form-label"> <span>Message</span> <input class="contact__form-input" type="text" required> </label> <button class="contact__form-button">Send</button> </form>1) No está obteniendo los elementos HTML porque contact__form-input es una clase y debe decirle a querySelectorAll que está buscando todos los elementos cuya clase es contact__form-input agregando . antes de className
const inputs = document.querySelectorAll( ".contact__form-input" ); 2) Debe agregar eventListener en focus o blur como:
inputs.forEach(input => { input.addEventListener("focus", () => addClass(input)) input.addEventListener("blur", () => removeClass(input)) }) NOTE: For demo purpose I've added thick red border
//INPUT ANIMATION const inputs = document.querySelectorAll(".contact__form-input"); function addClass(input) { input.classList.add("contact__form-input--focused"); } function removeClass(input) { input.classList.remove("contact__form-input--focused"); } console.log(inputs) inputs.forEach(input => { input.addEventListener("focus", () => addClass(input)) input.addEventListener("blur", () => removeClass(input)) }) .contact__form { display: flex; flex-direction: column; } .contact__form-input { border: none; border-bottom: .1rem solid rgba(0, 0, 0, .12); font-size: var(--medium-font-size); margin: 0; padding: 4px 0; width: 100%; background: 0 0; text-align: left; color: inherit; } .contact__form-input--focused { /*some animations here*/ border: 5px solid red; } <form class="contact__form" method="POST"> <label class="contact__form-label"> <span>Name</span> <input class="contact__form-input" name="Name" type="text" autocomplete="name" required> </label> <label class="contact__form-label"> <span>Phone number</span> <input class="contact__form-input" name="Phone number" type="tel" autocomplete="tel" required> </label> <label class="contact__form-label"> <span>Message</span> <input class="contact__form-input" type="text" required> </label> <button class="contact__form-button">Send</button> </form>