Open In App
Related Articles

HTML DOM button Object

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The button object in HTML is used to represent a <button> element. The getElementById() method is used to get the button object.

Property Values:

Property ValuesDescription
autofocusSets or returns whether a button should automatically get focused on page load.
defaultValueSets or returns the default value of the button.
disabledSets or returns whether the button is disabled or not.
formReturns a reference to the form that contains the button.
formActionSets or returns the value of the formAction attribute of the button.
formEnctypeSets or returns the value of the formEnctype attribute of the button.
formMethodSets or returns the value of the formMethod attribute of the button.
formNoValidateSets or returns whether the button allows form data to be validated or not.
formTargetSets or returns the value of the formTarget attribute of the button.
nameSets or returns the value of the name attribute of the submit button.
typeReturns the form element type of the button.
valueSets 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 in an HTML document.

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 1
  • Edge 12
  • Firefox 1
  • Opera 15
  • Safari 4


Last Updated : 05 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads