在将计算器输入传递给运算符 (=) 函数之前，如何在 JavaScript 中实时验证计算器输入？

Question

For two days now, I have been trying to validate in real-time in my JavaScript calculator user inputs before passing the overall input to the operator(=) function . What I want to achieve is: I don't want the user to input more than one operator sign or dot consecutively. As the user is typing each input I want the calculator to validate each input in realtime, so that if the user input more than one operator sign or dot consecutively the calculator will warn the user and automatically delete the last input and update the validated ones on the calculator screen. For example;

1A) 22.3.2. + 4 -6 **3 ++ 2-^ <-- THIS IS WRONG(not validated)

1B) 22.3+4-6*3+2 <-- THIS IS WHAT I WANT(validated)

Below is the sample code I wrote so far.

JavaScript
let userInput = "22.2. + 3 -4^"; //as the user is inputting, i want to be validating it in realtime
function validateWrongInput() {

    let p = userInput;
    for (i = 0; i < p.length; i++){
        if ((p.charAt(i) === "!" || p.charAt(i) === "^" ||
            p.charAt(i) === "*" || p.charAt(i) === "/" || p.charAt(i) === "+" ||
            p.charAt(i) === "-" || p.charAt(i) === "(" || p.charAt(i) === ")") &&
            (p.charAt(i - 1) === "!" || p.charAt(i - 1) === "^" ||
            p.charAt(i - 1) === "*" || p.charAt(i - 1) === "/" ||
            p.charAt(i - 1) === "+" || p.charAt(i - 1) === "-" ||
            p.charAt(i - 1) === "(" || p.charAt(i - 1) === ")")) {
            let a = p.split("");
            a.pop();
            let c = a.join("");
            upDisplay.textContent = c; //This shows the user input as he is typing
            updisplayResult = c;
            downDisplay.textContent = "ERROR-Why Two Operators?";  // this shows the final result when the = sign is pressed
            return true;
        } else {
            return false;
        }
    }
}

JavaScript
let userInput = "22.2. + 3 -4^"; //as the user is inputting, i want to be validating it in realtime
function validateDecimal() {
    let p = userInput;
    let pointCount = 0;
    for (let i = 0; i < p.length; i++) {
        if (p.charAt(i) !== "!" && p.charAt(i) !== "^" && p.charAt(i) !== "*" &&
            p.charAt(i) !== "/" && p.charAt(i) !== "+" && p.charAt(i) !== "-") {
            if (p.charAt(i) === "." && pointCount < 1) {
                pointCount += 1
                downDisplay.textContent = " ";
                return "ok";
            } else {
                pointCount = 0;
                let a = p.split("");
                a.pop();
                let c = a.join("");
                upDisplay.textContent = c; //This shows the user input as he is typing
                updisplayResult = c;
                downDisplay.textContent = "ERROR-Why Two Operators?"; // this shows the final result when the = sign is pressed
                return "ERROR-Why Two Operators?"+c;
            }
        } else {
            pointCount = 0;
        }
    }
}

I am looking for your help.

Answer 1

Checking input while typing

const input = document.getElementById('userInput');
input.addEventListener('keydown', () => {
    const p = input.value;
    // validation...
})

Sounds like you are looking for an event listener. Make sure you have the corresponding html input element, in this case: <input type="text" id="userInput">

Recommendations

I believe it is best to let the user finish whatever they are typing and check afterwards. Such behaviour can be achieved by using the event listener blur or validating just as it is submitted during the submit event (Not explained, but you may look it up or ask).

You may find a nicer way of validating your string if you craft a regular expression (regEx) together. This is somewhat complicated and should only be done if you feel confident with them.