кнопка точка не работает в калькуляторе javascript

Question

Я делаю это приложение калькулятора, и все работает нормально, и я почти закончил, но есть проблема с точечной кнопкой на экране, когда я нажимаю на нее, это дает мне эту ошибку в консоли:

The specified value "." is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

Вот код:

<input type="number" placeholder="Enter A Number...." step="0.01">

<td><button id="dot">.</button></td>

---

dot.addEventListener("click", function() {
    input.value += this.textContent;
    re1 = input.value;
})

Я также добавил этот бит кода, чтобы запретить ввод любых специальных символов:

input.onkeypress = function(e) {
var chr = String.fromCharCode(e.which);
if ("1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM.".indexOf(chr) < 0)
    return false;
};

но также, если я прокомментирую это, ничего не произойдет, поэтому я не знаю, где проблема.

любая помощь будет оценена заранее и спасибо.

Редактировать: Вот codepen с приложением, чтобы вы могли сами увидеть проблему

Answer 1

Измените тип на text вместо number

<input type="text" placeholder="Enter A Number....">

Когда вы добавляете точку . к вашему вводу, она больше не является числом и, таким образом, type="number" выдает ошибку.

Элемент ввода с type="number" на самом деле является строковым полем, которое затем преобразуется в число при внутренней передаче