Open In App
Related Articles

HTML DOM button Object

Improve Article
Improve
Save Article
Save
Like Article
Like

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 to create new button -->
    <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

Last Updated : 30 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials