Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
On clicking CHANGE −
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; }
262 Views
