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>