Open In App

HTML DOM Button value Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:  

button-value

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>


Output: 

button-value-2

Supported Browsers:

  • Google Chrome
  • Edge 12 and above
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 02 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads