The specified value "." cannot be parsed, or is out of range

Question

I trying to make a calculator but I have the problem with the "dot" because give me advertisement like this...

"The specified value "." cannot be parsed, or is out of range."

This is my code...

numberDot.addEventListener('click', function() {
    numberDot = '.' ;
    input.value = input.value + numberDot;
    console.log(typeof(input.value));
    console.log(input.value);
});

Answer 1

For those who still end up here with the above error from the browser. Generally, you will get this error when inserting the string into the input field of the type number. Check the Input field type attribute. This should do the trick.

Answer 2

This is one way to do it

Use type="number" inputs and radio buttons to choose the operation. That helps the person to enter numbers. You can also use type="text"

The important part is the conversion from string data into numeric values

When you read data from the value property of an input, the data is returned as a string. It can be converted to a number using parseInt (for integers) or parseFloat (for floating point). If it can't be parsed, NaN (Not a Number) is returned. To test for NaN, use isNaN().

For example:

let x = "kittens";
let n = parseInt(x);
if (isNaN(n)) {
    console.log(x + " is not a number");
}

The important part of this example is the conversion of numbers and figuring out which operation to perform.

// get the elements in the DOM
let numberOne = document.getElementById("numberOne");
let numberTwo = document.getElementById("numberTwo");
let output = document.getElementById("output");
let calculator = document.getElementById("calculator");

// every time the calculator values change
calculator.addEventListener('change', function(evt) {

  // get the values from the number inputs and try to convert them to floating point
  let valueOne = parseFloat(numberOne.value);
  let valueTwo = parseFloat(numberTwo.value);

  // if both numbers are numbers (this is not 100% accurate)
  if (!isNaN(valueOne) && !isNaN(valueTwo)) {
  
    // create a variable to store the result
    let value = 0;
    
    // get the radio buttons
    let ops = calculator['operation'];
    
    // use the selected radio button to determine the operation
    switch (ops.value) {
      case '+':
        value = valueOne + valueTwo;
        break;
      case '-':
        value = valueOne - valueTwo;
    }
    
    // display the result
    output.textContent = value;
  }
});

<form id="calculator">
  <!-- first number -->
  <input id="numberOne" type="number" placeholder="1.0" step="0.01" min="0" max="10">
  <br>
  <!-- radio buttons for operations -->
  <label for="add">Add
<input type="radio" name="operation" value="+">
</label>
  <label for="subtract">Subtract
<input type="radio" name="operation" value="-">
</label>
  <br>
  <!-- second number -->
  <input id="numberTwo" type="number" placeholder="1.0" step="0.01" min="0" max="10">
</form>

<!-- to display the result -->
<output id="output"></output>