Change button text on Click using JavaScript

avatar
Borislav Hadzhiev

Last updated: Jan 12, 2023
3 min

banner

# Table of Contents

  1. Change button text on Click using JavaScript
  2. Toggle button text on Click using JavaScript

# Change button text on Click using JavaScript

To change the text of a button on click:

  1. Add a click event listener to the button.
  2. Use the textContent property to change the button's text.
  3. For example, btn.textContent = 'Button clicked'.

Here is the HTML for the examples.

index.html
<!DOCTYPE html> <html lang="en"> <head> <title>bobbyhadz.com</title> <meta charset="UTF-8" /> </head> <body> <button id="btn">Click me</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const btn = document.getElementById('btn'); // ✅ Change button text on click btn.addEventListener('click', function handleClick() { btn.textContent = 'Button clicked'; }); /** * ✅ If you need to change the button's inner HTML use: * - `innerHTML` instead of `textContent` */

change button text on click

We added a click event listener to the button.

Every time the button is clicked, the handleClick function is invoked.

The textContent property can be used to change the button's text every time it's clicked.

The textContent property represents the text content of the node and its descendants.

# Changing the button's innerHTML on click

If you need to change the button's inner HTML, use the innerHTML property instead of textContent.

index.js
const btn = document.getElementById('btn'); // ✅ Change button text on click btn.addEventListener('click', function handleClick() { const initialText = 'Click me'; btn.innerHTML = `<span style="background-color: salmon">Button clicked<span>`; });

change button innerhtml on click

This approach could be used to add a loading spinner when the user clicks a button.

Note that you shouldn't set the button's innerHTML based on user-provided input without escaping it. This would make your site vulnerable to cross-site scripting attacks.

# Toggle button text on Click using JavaScript

To toggle a button's text on click:

  1. Add a click event listener to the button.
  2. Each time the button is clicked, check if the button's text is the initial text.
  3. If it is, change the text to the clicked text.
  4. Otherwise, change the text back to the initial text.
index.js
const btn = document.getElementById('btn'); // ✅ Toggle button text on click btn.addEventListener('click', function handleClick() { const initialText = 'Click me'; if (btn.textContent.toLowerCase().includes(initialText.toLowerCase())) { btn.textContent = 'Button clicked'; } else { btn.textContent = initialText; } }); /** * ✅ If you need to change the button's inner HTML use: * - `innerHTML` instead of `textContent` */

toggle button text on click

Each time the button is clicked, the handleClick function is invoked.

In the function, we check if the button's textContent contains the initial text value.

We converted both the initialText and the button's text content to lowercase to make a case-insensitive comparison.

If the button's text is the initial text, we set the text to a new value of Button clicked.

Otherwise, we set the button's text to the initial text.

# Toggle a button's innerHTML on click

If you need to use HTML when setting the button's content, use the innerHTML property instead of textContent.

index.js
const btn = document.getElementById('btn'); // ✅ Toggle button text on click btn.addEventListener('click', function handleClick() { const initialText = 'Click me'; if (btn.textContent.toLowerCase().includes(initialText.toLowerCase())) { btn.innerHTML = '<span style="background-color: lime">Button clicked</span>'; } else { btn.textContent = initialText; } });

toggle button innerhtml on click

We used the innerHTML property to set the content of a button to a span with a background color.

In a more real-world scenario, you would probably set the content to some text and a loading spinner.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.