I am trying to understand the DOM manipulation through JS, As an example, I used a form. Let's suppose I hover over an input field or even click, the background of the form will go dark( just an example). How can I cancel this change ( so that the background ocne again becomes light-blue), once I hover out the input field or click outside the form?
here is the code I am using for this : https://codepen.io/abdou-web-dev/pen/QWMxwdB
document.querySelectorAll("input").forEach((inputt) => {
inputt.addEventListener('click', funct3);
function funct3(e2) {
myform.style.backgroundColor = "black"
};
});
any help will be appreciated, thanks !
You can use the 'blur' event listener for this.
document.querySelectorAll("input").forEach((inputt) => {
inputt.addEventListener('blur', funct3);
function funct3(e2) {
myform.style.backgroundColor = "lightblue";
};
});
The blur event occurs when a DOM element loses its focus.
You can even implement this with pure css.
Use the :hover pseudo-class or :focus pseudo-class and you can write your color changes there
Thanks to scandav, I found the solution , which is :
document.querySelectorAll("input").forEach((inputt) => {
inputt.addEventListener('mouseleave', funct3);
function funct3(e2) {
myform.style.backgroundColor = "rgba(135, 206, 250, 0.281)"
};
});
Another way to implement this (if you're going for hover effects) would be to use mouseenter and mouseleave events.
Like this...
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"
};
});