JS DOM: input number field ㊷

Number Input Example

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

Code

<div>

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

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

</div>

"use strict";
{
    const num_CH3cn = document.getElementById("num_CH3cn");
    if (num_CH3cn === null)
        throw new Error("id num_CH3cn missing");
    const output_CR74T = document.getElementById("output_CR74T");
    if (output_CR74T === null)
        throw new Error("id output_CR74T missing");
    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

Example

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

<input type="number" id="inputNumber66947" value="0" min="0" max="1" step="0.1" />