HTML DOM Button value Property

The HTML DOM Button value property is associated with value attribute of the <button> element. It specifies the hidden value of the button. The value property sets or returns the value of the value attribute of a button. Browsers generally submit the value text when clicked on a button while others submit the text between the <button> element.

Syntax

Following is the syntax for −

Setting the value property −

buttonObject.value = text

Here, the text property value is the initial value that is given to the button.

Example

Let us see an example of the button value property −

<!DOCTYPE html>
<html>
<body>
<button id="Button1" name="random" value="FirstButton">My Button</button>
<p>Click on the below button to change the above button value</p>
<button onclick="changeFunc()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeFunc() {
      document.getElementById("Button1").value = "SecondButton";
      var x=document.getElementById("Button1").value;
      document.getElementById("Sample").innerHTML="The button value is now "+x;
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Button value Property

On clicking CHANGE −

HTML DOM Button value Property

We have first created a button with value “FirstButton” with id “button1”.

<button id="Button1" name="random" value="FirstButton">My Button</button>

We have then created a button CHANGE which will execute the changeFunc() on click.

<button onclick="changeFunc()">CHANGE</button>

The changeFunc() method will get the first button element using its id “Button1” and change its value from “FirstButton” to “SecondButton”. The newly changed button value is then assigned to the variable x and is displayed inside the paragraph with id “Sample”.

function changeFunc() {
   document.getElementById("Button1").value = "SecondButton";
   var x=document.getElementById("Button1").value;
   document.getElementById("Sample").innerHTML="The button value is now "+x;
}