Estoy tratando de entender la manipulación de DOM a través de JS. Como ejemplo, utilicé un formulario. Supongamos que paso el cursor sobre un campo de entrada o incluso hago clic, el fondo del formulario se oscurecerá (solo un ejemplo). ¿Cómo puedo cancelar este cambio (para que el fondo vuelva a ser azul claro), una vez que pase el cursor por el campo de entrada o haga clic fuera del formulario?
aquí está el código que estoy usando para esto: https://codepen.io/abdou-web-dev/pen/QWMxwdB
document.querySelectorAll("input").forEach((inputt) => { inputt.addEventListener('click', funct3); function funct3(e2) { myform.style.backgroundColor = "black" }; });Cualquier ayuda será apreciada, gracias !
Puede usar el detector de eventos 'desenfoque' para esto.
document.querySelectorAll("input").forEach((inputt) => { inputt.addEventListener('blur', funct3); function funct3(e2) { myform.style.backgroundColor = "lightblue"; }; });El evento de desenfoque ocurre cuando un elemento DOM pierde su foco.
Incluso puedes implementar esto con CSS puro.
Use la pseudoclase :hover o la pseudoclase :focus y puede escribir sus cambios de color allí
Gracias a scandav, encontré la solución, que es:
document.querySelectorAll("input").forEach((inputt) => { inputt.addEventListener('mouseleave', funct3); function funct3(e2) { myform.style.backgroundColor = "rgba(135, 206, 250, 0.281)" }; });Otra forma de implementar esto (si busca efectos de desplazamiento) sería usar eventos mouseenter y mouseleave.
Como esto...
document.querySelectorAll("input").forEach((inputt) => { inputt.addEventListener('mouseenter', funct3); inputt.addEventListener('mouseleave', funct4); function funct3(e2) { myform.style.backgroundColor = "black" }; function funct4(e2) { myform.style.backgroundColor = "lightblue" }; });