How do I detect when input value changes real-time in JavaScript?

Question

I'm trying to get my input field element to remove a class immediately after the input value changes. Currently, I'm able to detect the changes and remove the class 'invalid', but only after the input field is inactive. Here's my code;

fieldsArr.forEach(el => {
            el.addEventListener('change', function() {
                this.classList.remove('invalid');
            });
        });

Answer 1

Use the input event instead, as the name suggests it would fire each time an input is made, see this example on how to use the event:

let inputElem = document.querySelector('input');

inputElem.addEventListener('input', () => {
  console.log(inputElem.value); // Log the new value after an input is made
});

<input />