Как выводить сообщение если в инпут добавлен не тот символ?

Question

[Brew]

Есть супер простой калькулятор, который выполняет лишь действие в виде: Сложение, вычитание, деление, умножение. Я только начал щупать js, поэтому не могу с уверенностью сказать, что я сделал правильно, но то что получилось, то получилось. Суть стоит в том, что не могу сделать проверку по символу. Допустим в input с числами должны ставится только числа, иначе должно выводится сообщение, что символ введен неверно, так же и с инпутом, который отвечает за знак.
Как это можно реализовать?
Ссылка на код

Answer 1

[Alaska14]

Самое простое - добавить в инпуте type="number". И пользователь кроме числа ничего не сможет ввести.
По знакам конечно лучше сделать выпадающий список и в нём указать доступные варианты.

Comments

[Brew]

За подсказку с number спасибо, а вот по знакам по другому нельзя, задание именно с input

Answer 2

[Сергей Соколов]

можно без кнопки – реагировать на любые изменения.
Для валидации можно использовать атрибут pattern. Для отображения ошибочного поля – псевдокласс :invalid

codepen

Comments

[Brew]

Прекрасное решение работы, но я на данный момент не смогу объяснить этот код, как он работает) На данный момент знаний не хватает

[Brew]

Спасибо Вам!

[WapSter]

Brew, событие цикл, переменные, функции, объект. Это же основы