Не могу использовать кнопку точки в приложении калькулятора, которое я делаю в

Question

, поэтому я делаю это приложение калькулятора, используя <input type="number">, но когда я пытаюсь набрать точку, нажимая на кнопки html, я сделал это, я получаю эту ошибку: 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....">

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

<tr>
    <td><button id="dot">.</button></td>
    <td><button id="zero">0</button></td>
    <td><button id="equal">=</button></td>
</tr>

Так что это калькулятор.

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

Answer 1

Согласно MDN , вы можете добавить атрибут step к тегу input, чтобы разрешить десятичные дроби. Примером будет

<input type="number" step="0.01">

Answer 2

Проблема в том, что точка на самом деле не число, а строка. Однако ваше текстовое поле ввода имеет тип ' number '.

В функции обратного вызова для события click вы пытаетесь изменить значение поля ввода на значение .textContent свойство. Это всегда будет возвращать строку, поэтому вы получите ошибку.

Я бы порекомендовал сохранить все входы кнопок вашего калькулятора во временной строке и в конечном итоге сделать parseFloat () для этой переменной перед отправкой в ​​ваше текстовое поле ввода. Это преобразует ваш ввод в правильное число.

например,

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

Вот пример:

var myInput = "";
dot.addEventListener("click", function() {
  myInput += this.textContent;
  input.value = parseFloat(myInput);
})
one.addEventListener("click", function() {
  myInput += this.textContent;
  input.value = parseFloat(myInput);
})

<input type="number" id="input" placeholder="Enter A Number....">
<tr>
  <td><button id="dot">.</button></td>
  <td><button id="one">1</button></td>
</tr>