The button object in HTML is used to represent a <button> element. The getElementById() method is used to get the button object.
Property Values:
- autofocus: It sets or returns whether a button should automatically get focused when the page loads or not.
- defaultValue: It sets or returns the default value of the button.
- disabled: It sets or returns whether the button is disabled or not.
- form: It returns a reference to the form that contains the button.
- formAction: It sets or returns the value of the formation attribute of the button.
- formEnctype: It sets or returns the value of the formEnctype attribute of the button.
- formMethod: It sets or returns the value of the formMethod attribute of the button.
- formNoValidate: It sets or returns whether the button, allows the form-data to be validated or not.
- formTarget: It sets or returns the value of the formTarget attribute of the button.
- name: It sets or returns the value of the name attribute of the submit button.
- type: It returns the form element type of the button.
- value: It sets or returns the value of the value attribute of the button
Creating button object: The button object can be created using JavaScript. The document.createElement() method is used to create <button> element. After creating a button object use the appendChild() method to append the particular element (such as div) to display it.
Example 1: In this example, we will use an HTML DOM button Object
HTML
<!DOCTYPE html>
<html>
<head>
<title>
DOM Button Object
</title>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
DOM Button Property
</h2>
<p>Click the button to create a button.</p>
<button onclick="Geeks()">
Press me!
</button>
<br><br>
<div id="GFG"></div>
<script>
function Geeks() {
let myDiv = document.getElementById("GFG");
// creating button element
let button = document.createElement('BUTTON');
// creating text to be
//displayed on button
let text = document.createTextNode("Button");
// appending text to button
button.appendChild(text);
// appending button to div
myDiv.appendChild(button);;
}
</script>
</body>
</html>
|
Output:
Accessing button object: Access the button object by using the getElementById() method. Put the id of the button element in the getElementById() to access it.
Example 2: In this example, we will use the button object by using the getElementById() method
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Button Object
</title>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
DOM Button Property
</h2>
<p>
Click the button to change the
text inside it.
</p>
<button type="button" id="btn" onclick="geek()">
Try it
</button>
<script>
function geek() {
// Accessing the button element
// by using id attribute
let doc = document.getElementById("btn");
// Changing the text content
doc.textContent = "Click me!";
}
</script>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Edge 12 and above
- Internet Explorer
- Firefox
- Opera
- Safari