I'm trying to add the class ".contact__form-input--focused" to the input that is focused from a form.
I'm trying to do that adding an event listener to every input, and then if it has the class already delete that class from the classlist.
//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>if your using JS like this and not just the pseudo of :focus you can do it by
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");
});
});
Or if you want to switch the classes
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);
});
The reason for functions declarations and not ()=>{} is because the latter will preserve scope and to set up the this keyword correctly you need the scopes to be changed, the best way to think of it is an EventListner is called via apply() on the element
The pseudo method is just change your CSS to be
.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*/
}
You don't need the if statement. Just add both event listeners to all the inputs.
The 2nd argument to addEventListener() must be a function. You're calling the function immediately, not when the event happens.
//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) You are not getting the HTML elements because contact__form-input is a class and you have to tell querySelectorAll that you are looking for all elements whose class is contact__form-input by appending . before className
const inputs = document.querySelectorAll( ".contact__form-input" );
2) You should add eventListener on focus or blur as:
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>