How to Change the Button Label when Clicked using JavaScript ? Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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 propertyUsing innerText propertyChanging Button Label Using innerHTML propertyThe 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>GeeksforGeeks</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: Changing Button Label Using innerText propertyThe innerText property in JavaScript is used to dynamically modify the text content within any element. The toggleLabel function, triggered by the button's onclick event, checks the current label and toggles between two states, changing the button's text. Syntax:selectedHTMLElement.innerText = text Example: The below example uses innerText property to change the button label when clicked in JavaScript. HTML <!DOCTYPE html> <html> <head> <title> Button Label </title> <style> body { font-family: Arial, sans-serif; text-align: center; margin: 40px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; } h1 { color: green; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3>Using innerText property</h3> <button onclick="toggleLabel()"> Click me </button> <script> function toggleLabel() { const btn = document.querySelector('button'); if (btn.innerText === 'Click me') { btn.innerText = 'Label Changed!'; } else { btn.innerText = 'Click me'; } } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Change the Button Label when Clicked using JavaScript ? G gauravgandal Follow Improve Article Tags : HTML JavaScript-Questions Similar Reads How to change a button text on click using localStorage in Javascript ? In this article, we will learn how to change a button text using Javascript localStorage when we click on the button achieved by adding HTML onclick event listener. Approach: HTML DOM Window localStorage allows us to store key-value pairs in our browser using an object. The name of the key should be 3 min read How to change the text of a label using JavaScript ? Changing the text of a label using JavaScript involves selecting the label element and updating its textContent or innerHTML property. This allows you to modify the displayed text dynamically, often in response to user interactions or changes in data, enhancing interactivity and responsiveness.Below 2 min read How to change the href value of a tag after click on button using JavaScript ? JavaScript is a high-level, interpreted, dynamically typed, and client-side scripting language. HTML is used to create static web pages. JavaScript enables interactive web pages when used along with HTML and CSS. Document Object Manipulation (DOM) is a programming interface for HTML and XML document 4 min read How to Change Button Label in Alert Box using JavaScript ? In JavaScript, the alert method is used to display an alert box with a message. By default, the alert box contains an "OK" button. We cannot directly update the default alert box, However, we can customize the button label by creating a custom alert box using HTML, CSS, and JavaScript. ApproachCreat 2 min read How to get the ID of the clicked button using JavaScript/jQuery ? To get the ID of a clicked button using JavaScript/jQuery means identifying which specific button was clicked within a webpage. This is useful when multiple buttons exist, and you need to distinguish between them based on their unique ID for further processing.So, to get the ID of the clicked button 3 min read How to count the number of times a button is clicked using JavaScript ? At times, it becomes necessary to monitor the number of times a user clicks a button. In this article, we are going to learn how to count the number of times a button is clicked using JavaScript Below are the approaches to count the number of times a button is clicked using JavaScript Table of Conte 3 min read How to Change the ID of Element using JavaScript? We are given an element and the task is to change the ID of elements using JavaScript. ID is unique for any element and it can be assigned to an element only once. JavaScript provides a method to access this id and also to manipulate the id. Syntax:Selected_element.id = newID;Below are the appraoche 2 min read How to Change Label when Radio Button Checked in Tailwind CSS ? Tailwind CSS is a popular utility-first CSS framework that enables developers to quickly style their web applications without writing much CSS code. In this article, we will discuss how to change the label text of a radio button when it is checked using Tailwind CSS. We will explore different approa 3 min read How to check a button is clicked or not in JavaScript ? Checking if a button is clicked in JavaScript involves detecting user interactions with the button element. This is typically achieved by adding an event listener, such as onclick or addEventListener(click), which triggers a specific function or action when the button is clicked.There are two method 2 min read How to change the text and image by just clicking a button in JavaScript ? The image and text can be changed by using JavaScript functions and then calling the functions by clicking a button. We will do that into 3 sections., in the first section we will create the structure by using only HTML in the second section we will design minimally to make it attractive by using si 2 min read Like