HTML DOM Button value Property

Last Updated : 02 Jan, 2024

The Button value Property is used to set or return the value of the value attribute of a button element. The value attribute for <button> element in HTML is used to specify the initial value of the button element.

Syntax:

It is used to return the value property.

buttonObject.value

It is used to set the value property.

buttonObject.value = text

Property Values:

text: It specify the initial value of the Button.

Return Value: It returns a string value which represent the initial value of the button.

Example 1: This example illustrates how to return the value Property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM button value Property
    </title>
 
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
 
    <h2>
        HTML DOM button value Property
    </h2>
 
    <button id="btn" value="GeeksforGeeks"
        onclick="myGeeks()">
        Click Here!
    </button>
 
    <p id="result"></p>
 
    <script>
        function myGeeks() {
            let x = document.getElementById("btn").value;
            document.getElementById("result").innerHTML = x;
        }
    </script>
</body>
 
</html>

Output:

Example 2: This example illustrates how to set the value Property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM button value Property
    </title>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
 
    <h2>
        HTML DOM button value Property
    </h2>
 
    <button id="btn" value="User"
        onclick="myGeeks()">
        Click Here
    </button>
 
    <p id="result"></p>
 
    <script>
        function myGeeks() {
            let x = document.getElementById("btn").value
                = "GeeksForGeeks"
            document.getElementById("result").innerHTML 
                = "The value changed from User to " + x;
        }
    </script>
</body>
 
</html>