Skip to content
Related Articles

Related Articles

HTML | DOM button Object

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 21 Jul, 2022
View Discussion
Improve Article
Save Article

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 focus 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 appendChild() method to append the particular element (such as div) to display it.
Example 1: 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM Button Object
        </title>
         
        <!-- script to create new button -->
        <script>
            function Geeks() {
                var myDiv = document.getElementById("GFG");
                 
                // creating button element
                var button = document.createElement('BUTTON');
                 
                // creating text to be
                //displayed on button
                var text = document.createTextNode("Button");
                 
                // appending text to button
                button.appendChild(text);
                 
                // appending button to div
                myDiv.appendChild(button); ;
            }
        </script>
    </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>
    </body>
</html>                   

Output: 
Before click on the button: 
 

buttonobj

After click on the button: 
 

buttonobj

Accessing button object: Access the button object by using the getElementById() method. Put the id of button element in the getElementById() to access it.
Example 2: 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM Button Object
        </title>
         
        <script>
        function geek() {
             
            // Accessing the button element
            // by using id attribute
            var doc = document.getElementById("btn");
             
            // Changing the text content
            doc.textContent = "Click me!";
        }
        </script>
    </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>
    </body>
</html>                   

Output: 
Before click on the button: 
 

buttonobj

After click on the button: 
 

buttonobj

Supported Browsers: 

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!