Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Button value Property

  • Last Updated : 20 Aug, 2021

The DOM 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 Html program illustrates how to return the value Property.  

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM button value Property
    </title>
 
</head>
 
<body style="text-align:center">
    <h1 style="color:green;">
            GeeksforGeeks
        </h1>
 
    <h2>
            DOM button value Property
        </h2>
 
    <button id="btn"
            value="GeeksforGeeks"
            onclick="geek()">
        Click me!
    </button>
 
    <p id="g"
       style="font-size:25px;color:green;">
  </p>
 
 
    <script>
        function geek() {
 
            var x =
                document.getElementById("btn").value;
            document.getElementById("g").innerHTML =
                x;
        }
    </script>
</body>
 
</html>

Output: 
Before Clicking On Button: 

After Clicking On Button: 

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

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM button value Property
  </title>
</head>
 
<body style="text-align:center">
    <h1 style="color:green;">
            GeeksforGeeks
        </h1>
 
    <h2>
            DOM button value Property
        </h2>
 
    <button id="btn"
            value="User"
            onclick="geek()">
        Click me!
  </button>
 
    <p id="g"
       style="font-size:25px;
              color:green;">
  </p>
 
 
    <script>
        function geek() {
            var x =
                document.getElementById("btn").value =
                "GeeksForGeeks"
            document.getElementById("g").innerHTML =
              "The value has been changed from user to " +
              x;
        }
    </script>
</body>
 
</html>

Output: 
Before Clicking On Button: 

After Clicking On Button: 

Supported Browsers: The browser supported by DOM Button value Property are listed below:  

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!