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');
            });
        });

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');
            });
        });

• javascript
• html
• css

• 9 Instead of listening for change, listen for input – blex Commented Feb 22, 2020 at 15:54
• "Javascript" and "real-time" don't really belong in a sentence together.... – Jared Smith Commented Feb 22, 2020 at 15:58
• 1 @JaredSmith what do you mean by that? JavaScript allows real-time updates in many cases, for example - this website, by using WebSockets. – DaCurse Commented Feb 22, 2020 at 15:59
• 1 @Jared JavaScript is one of too few languages that is absolutely real-time it uses the so called JIT-piler, which means not only does it operate in real-time with the code supplied but also with the code it has generated and and when it es to events, all emitters are real-time and so are the freaking event handlers. JavaScript's original name was Live Script, for a reason! – Bekim Bacaj Commented Feb 22, 2020 at 16:05
• 2 @JaredSmith So you're basically nitpicking and referring to a very specific detail, sure bud. – DaCurse Commented Feb 22, 2020 at 22:59

2 Answers 2

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 />

If you want to listen for events, your elemet should be extended from EventEmitter.