HTML DOM Button value Property

The HTML DOM Button value property is associated with value attribute of the 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 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 ?

My Button
Click on the below button to change the above button value
CHANGE

Output

This will produce the following output ?

On clicking CHANGE ?

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

My Button

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

CHANGE

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;
}