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.
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">
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.