HTML DOM Button value Property
Last Updated :
02 Jan, 2024
The 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 example illustrates how to return the value Property. Â
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM button value Property
</ title >
</ head >
< body style = "text-align:center" >
< h1 >GeeksforGeeks</ h1 >
< h2 >
HTML DOM button value Property
</ h2 >
< button id = "btn" value = "GeeksforGeeks"
onclick = "myGeeks()" >
Click Here!
</ button >
< p id = "result" ></ p >
< script >
function myGeeks() {
let x = document.getElementById("btn").value;
document.getElementById("result").innerHTML = x;
}
</ script >
</ body >
</ html >
|
Output:Â Â
Example 2: This example illustrates how to set the value Property. Â
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM button value Property
</ title >
</ head >
< body style = "text-align:center" >
< h1 >GeeksforGeeks</ h1 >
< h2 >
HTML DOM button value Property
</ h2 >
< button id = "btn" value = "User"
onclick = "myGeeks()" >
Click Here
</ button >
< p id = "result" ></ p >
< script >
function myGeeks() {
let x = document.getElementById("btn").value
= "GeeksForGeeks"
document.getElementById("result").innerHTML
= "The value changed from User to " + x;
}
</ script >
</ body >
</ html >
|
Output:Â
Supported Browsers:
- Google Chrome
- Edge 12 and above
- Internet Explorer
- Firefox
- Opera
- Safari
Share your thoughts in the comments
Please Login to comment...