Add class to an input when its focused, and remove it when isnt focused

December 11, 2021

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>

>Solution :

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>