HTML | DOM Button Value Property - GeeksforGeeks

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:  

button-value

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: 

button-value-2

Supported Browsers:

  • Google Chrome
  • Edge 12 and above
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

M

ManasChhabra2 Follow Improve Previous Article HTML | DOM Input Button form Property Next Article

Từ khóa » Html Button Properties