Changing Button Label Using innerHTML property

The innerHTML property in JavaScript is used to dynamically change the content inside any element. The changeLabel function, which is triggered by the button’s onclick attribute, selects the button and updates its innerHTML, changing the button label.

Syntax:

selctedHTMLElement.innerHTML = "contentToAppend";

Example: The below example uses innerHTML property to change the button label when clicked in JavaScript.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Change Button Label
    </title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 40px;
        }
 
        h1 {
            color: green;
        }
 
        h3 {
            color: #333;
        }
 
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
 
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
 
<body>
    <h1>w3wiki</h1>
    <h3>
        Using innerHTML property
    </h3>
    <button onclick="changeLabel()">
        Click me
    </button>
    <script>
        function changeLabel() {
            const button =
                document.querySelector('button');
            button.innerHTML = 'Button Clicked!';
        }
    </script>
</body>
 
</html>


Output:

How to Change the Button Label when Clicked using JavaScript ?

Changing the Label of the Button element when clicked in JavaScript can be used to provide more information to the user such as the text of the Submit button will change to the Submitted as soon as the form submission is completed.

The below approaches can be used to accomplish this task:

Table of Content

  • Using innerHTML property
  • Using innerText property

Similar Reads

Changing Button Label Using innerHTML property

The innerHTML property in JavaScript is used to dynamically change the content inside any element. The changeLabel function, which is triggered by the button’s onclick attribute, selects the button and updates its innerHTML, changing the button label....

Changing Button Label Using innerText property

...