HTML | DOM Button value Property
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
- Edge 12 and above
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...