How to use .toFixed() from an input field

Question

I can't seem to understand why I can't get .toFixed() to work in my code. I've tried different variations but something is missing.

I get the following error upon running the code.

Uncaught TypeError: document.getElementById(...).value.toFixed is not a function

My Code:

<input type="number" id="num1">
<p>+</p>
<input type="number" id="num2">
<p>=</p>
<p id="result"></p>
<br>
<button id="submit" onclick="calculate()">Calculate</button>

<script>
  function calculate(){
    const a = document.getElementById("num1").value;
    const b = document.getElementById("num2").value;

    let finalAnswer = a.toFixed(2) + b.toFixed(2);
    document.getElementById("result").innerHTML = finalAnswer;
    console.log(a);
    }
</script>

toFixed is on a number, however when you get the value of an input, it will be a string. Try converting to a number first. — jas7457, Feb 24 '18 at 21:18
Does this answer your question? [Why can't I use toFixed on an HTML input object's value?](https://stackoverflow.com/questions/5330420/why-cant-i-use-tofixed-on-an-html-input-objects-value) — Heretic Monkey, Aug 17 '21 at 15:17

Isac · Accepted Answer · 2018-02-24T21:39:23.797

toFixed is defined in Number as you can see in the documentation therefore you must first convert the input values to numbers before using it.

For that you can use the Number constructor passing it the text to convert:

let myNumber = Number(someString);

After that you can output the result with toFixed() which gives you a string with as many digits after the decimal point as the number you passed to it:

console.log(myNumber.toFixed(2));

Taking all of this into consideration you can change your code to:

function calculate() {
  const a = document.getElementById("num1").value;
  const b = document.getElementById("num2").value;

  //Convert both inputs to Number's before adding them
  let finalAnswer = Number(a) + Number(b); 

  //toFixed only here when you need to output it
  document.getElementById("result").innerHTML = finalAnswer.toFixed(2); 
  console.log(a);
}

<input type="number" id="num1">
<p>+</p>
<input type="number" id="num2">
<p>=</p>
<p id="result"></p>
<br>
<button id="submit" onclick="calculate()">Calculate</button>

score 0 · Answer 2 · answered Feb 24 '18 at 21:19

The .toFixed() is a method for numbers. When you get the value from a input, it is a string. Therefore you have to convert it to a number. You can convert to number with: Number() So, your code should look something like this:

const a = Number(document.getElementById("num1").value); const b = Number(document.getElementById("num2").value);

score 0 · Answer 3 · answered Feb 24 '18 at 21:20

0

That's because your input gets evaluated as a string and not as a number, this is one of the multiple ways i'd solve it:

const a = document.getElementById("num1").value - 0;
const b = document.getElementById("num2").value - 0;

answered Feb 24 '18 at 21:20

Maz

93
12

score 0 · Answer 4 · answered Aug 15 '22 at 15:04

0

Hi you can use step for float range ether.You cant use: <input type="number" step=any To float I recomend to setting 0.01.

answered Aug 15 '22 at 15:04

André Davedovicz Dettmer

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Albert Logic Einstein Aug 19 '22 at 01:50

How to use .toFixed() from an input field

4 Answers4