# Making an HTML number input display 2 decimal places using JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Aug 7, 2022, updated Nov 26, 2022. Topics: JavaScript, HTML.
Canonical URL: https://attacomsian.com/blog/javascript-make-number-input-display-2-decimal-places

> A short guide to learning how to make an HTML number input field always display 2 decimal places using JavaScript.

If you are using an HTML number input field (`<input type="number">`) to collect a dollar amount, here is a little trick to make it always display 2 decimal places using JavaScript.

Let us say you have the following HTML number `<input>` tag: 

```markup
<input type="number" id="price" min="0" max="10" step="0.01" value="0.00">
```

Now we can [attach a `change` event handler](https://attacomsian.com/blog/javascript-dom-add-an-event-handler) to listen for input changes:

```javascript
const input = document.querySelector('#price')
input.addEventListener('change', e => {
  // TODO: Format Number Here
})
```

Inside the event handler method, we can use the `toFixed()` method to round the input string to a specified number of decimals:

```javascript
input.addEventListener('change', e => {
  e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(2)
})
```