With JavaScript, we can change the text of any HTML element, including buttons, in real time. We can use the button onclick event to change the text. JS provides three different properties to set or get the text of an HTML element’s text. These are innerText, innerHTML, and textContent.
Table of Contents
In this post, “Change button text JavaScript”, we are going to explain all three-button types and all three JS properties to manipulate the HTML button’s text.
HTML Button General Syntax
<button id=”myButton” type="button|submit|reset">| Type Attribute Value | Description |
|---|---|
| Button | Represents a clickable or interactive button supported by almost all modern browsers. |
| Submit | Represents a submit button to submit form data to server. |
| Reset | Represents a reset button to reset form data to its default values. |
Basic Example of Changing Button Text in JavaScript
Change button text JavaScript – Using innerText
Start with a simple example. Here, we change the text of a button when the user clicks it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change button text JavaScript – Using innerText Code Example</title>
</head>
<body>
<button id="myButton">Click me!</button>
<script>
document.getElementById('myButton').addEventListener('click', function()
{
this.innerText = 'Humm... Button Clicked!';
});
</script>
</body>
</html>Output
Using innerHTML
<script>
document.getElementById('myButton').addEventListener('click', function()
{
//this.innerHTML = 'Humm... Button Clicked!';
this.innerHTML = "<b><i>Humm... Button Clicked!</i></b>";
});
</script>Here we are using the same element. Just modified the script portion. So change accordingly to produce below change text output.
Output
Using textContent
<script>
document.getElementById('myButton').addEventListener('click', function()
{
this.textContent = "Humm... Button Clicked!";
});
</script>| JS Method | Description |
|---|---|
| innerText | You can change only text of the button. |
| innerHTML | You can change the text with specific styles also. |
| textContent | Similar to innerText. But most preferred method to change only the text. |
Look at the below example to understand the differences clearly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change button text JavaScript – Using innerText Code Example</title>
</head>
<body>
<button id="myButton"><b>Click me!</b></button>
<script>
document.getElementById('myButton').addEventListener('click', function()
{
console.log(this.innerText);
console.log(this.innerHTML);
console.log(this.textContent);
this.innerText='Humm... Button Clicked!';
});
</script>
</body>
</html>Output
Code Explanation
In the first-click innerText method, return only the text part. innerHTML method returns text part along with bold HTML tag snippets. But in the second click, the innerText method replaces all elements within the button by the setter text only.
So what do we understand so far?
- If you want to change text and text styles, use innerHTML.
- If you want to keep the button text style, then also use innerHTML.
- If the element has no other inner tags only then use innerText or textContent.
Step-by-Step Guide to Change Button Text in JavaScript
Follow the below steps to implement “Change button text JavaScript” correctly:
- Get the Button Element: Use document.getElementById or document.querySelector to select the button.
- Add an Event Listener: Use addEventListener to implement the click event. It’s a best practice instead of using the onclick inline method.
- Change the Text: Set the textContent property of the button. You can also use the innerText or innerHTML method.
Methods to Select Button
You can use different methods to select your HTML button element. Here are some examples you can follow:
By ID:
let button = document.getElementById('myButton');By Class:
let button = document.querySelector('.myButtonClass');By Tag:
let button = document.querySelector('button');Add Event Listeners
From my side, I always recommend adding event listeners instead of inline onclick events. Here is a code sample of how you can add event listeners to respond to an HTML control event:
button.addEventListener('click', function() {
// Change the button text here
});For dynamic applications some times you may need to add event listener dynamically by checking the HTML control type. In this case use JS event target type.
Frequent Use Cases
Here are some common scenarios where you need to change button text in JavaScript:
Form Submission:
document.getElementById('submitBtn').addEventListener('click', function() {
this.textContent = 'Submitting...';
});Toggle Button State:
document.getElementById('toggleBtn').addEventListener('click', function() {
this.textContent = this.textContent === 'Start' ? 'Stop' : 'Start';
});Use JS toggle function wisely.
Loading State:
document.getElementById('loadBtn').addEventListener('click', function() {
this.textContent = 'Loading...';
});Tips to Improve User Experience
- Keep It Simple: Use clear and simple text to guide users.
- Be Descriptive: Make sure that the button text accurately describes the action.
- Feedback: Provide textual and visual feedback to the user, like changing the button color along with the text.
In case of Errors
If you are failed to change the text of a button then follow the below steps:
- Correct Selection: Make sure that you select the button correctly and there is no spelling or case sensitivity issue.
- Event Binding: Confirm that the event listener is correctly attached.
- JavaScript Errors: Check the browser console for any JavaScript errors.
Conclusion
So far, we have mentioned all three methods and step-by-step guidelines to implement “Change button text JavaScript”. From now and on, you can easily change button text to enhance user interaction on your website. I hope that all of our above code examples will help you create dynamic and responsive web applications. Being with us and supporting us to grow.
🏋️♂️ Discover Code Blocks From 20+ yrs JS Expert
💥 Asp.net C# Developer
🏆 Solution Architect
👨✈️ Database Administrator
📢 Speaker
🎓 MCTS since 2009
Leave a Reply