Элемент сразу не применяет свойства полученные в скрипте, а только после события — как принудительно обновить элемент?

Question

[Harry-Davidson]

Есть input, я хочу, чтобы при вводе числа, если пользователь ошибся, текст стал красным, а когда ошибка исправлена, чтобы снова поменял цвет на черный.

Код работает некорректно - он отрабатывает, если пользователь вводит некорректный символ и еще один доп. символ. Т.е. на лету текст не обновляется.

А хотелось бы мгновенную реакцию после первого некорректного символа.

function calculate(){
            let x1 = document.getElementById("x1");
            if (!isNaN(x1.value)){
                x1.style.color = "black";
                if (debug) console.log("-----> p1");
            }
            else{
                x1.style.color = "red";
                if (debug) console.log("-----> p2");
            }
        }

<div class="field">Число 1: <input type="text" id="x1" value="" oninput="calculate()"></div>

Comments

[MrColdCoffee]

у функции не хватает закрывающей скобки

Answer 1

[Егор Живагин]

function calculate(event){
            if (!isNaN(event.target.value)){
                event.target.style.color = "black";
                if (debug) console.log("-----> p1");
            }
            else{
                event.target.style.color = "red";
                if (debug) console.log("-----> p2");
            }
        }

const x1 = document.querySelector('#x1');

x1.addEventListener( 'input' , calculate);