HTML | DOM Input Number value Property

Last Updated : 25 Aug, 2022

The DOM Input Number value Property in HTML DOM is used to set or return the value of a value attribute of the number field. The value attribute specifies the initial value of the input number Field. It contains the default value or the user types.

Syntax:

It returns the value property.

numberObject.value

It is used to Set the value property.

numberObject.value = number

Property Value: It contains single value number which defines the value of the input number field.

Return Value: It returns the numeric value which represent the value of the number Field.

Example-1: This example illustrates how to return the property.

HTML

<!DOCTYPE html>
<html>
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM Input Number value Property</h2>
    <input type="number" id="myNumber" value="10">
    
<p>Click the button to get the
        number of the number field.</p>

    <button onclick="myFunction()">
        Click Here!
    </button>
    <p id="demo"></p>

    <script>
        function myFunction() {

            // Accessing input value 
            var x =
                document.getElementById("myNumber").value;
            document.getElementById("demo").innerHTML = x;
        } 
    </script>
</body>
</html>

Output:

Before Clicking On Button:

After Clicking On Button:

Example-2: This Example illustrates how to set the Property.

HTML

<!DOCTYPE html>
<html>
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM Input Number value Property</h2>
    <input type="number" id="myNumber" value="10">
    
<p>Click the button to change the
        number of the number field.</p>

    <button onclick="myFunction()">
        Click Here!
    </button>
    <p id="demo"></p>

    <script>
        function myFunction() {

            // Accessing input value 
            var x =
                document.getElementById("myNumber").valued = "20";
            document.getElementById("demo").innerHTML =
                "The value of number was changed to " + x;
        } 
    </script>
</body>
</html>