JS DOM: input number field

By Xah Lee. Date: . Last updated: .

Number Input Example

This is for user to input a number, integer or decimal number.

Result:

Code

<label for="num_CH3cn">Enter a number:</label>
<input type="number" id="num_CH3cn" min="1" max="100" />

<p>Result:
<span id="output_CR74T"></span>
</p>

Here's JavaScript code to get the value.

"use strict";
{
    const num_CH3cn = document.getElementById("num_CH3cn");
    const output_CR74T = document.getElementById("output_CR74T");
    const f_update = () => {
        output_CR74T.textContent = num_CH3cn.value;
    };
    num_CH3cn.addEventListener("input", f_update);
    f_update();
}

Options

value=40
a default value.
step=0.1
increment. In some browsers, you can press up/down arrow to increase/decrease the value

Here's a example of steps 0.1, with min max of 0 to 1.