Change button text on Click using JavaScript

# Table of Contents

# Change button text on Click using JavaScript

To change the text of a button on click:

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

Here is the HTML for the examples.

index.html

Copied!
<!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>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
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`
 */

The code for this article is available on GitHub

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

Copied!
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>`;
});

The code for this article is available on GitHub

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:

Add a click event listener to the button.
Each time the button is clicked, check if the button's text is the initial text.
If it is, change the text to the clicked text.
Otherwise, change the text back to the initial text.

index.js

Copied!
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`
 */

The code for this article is available on GitHub

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

Copied!
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;
  }
});

The code for this article is available on GitHub

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.

You can use the search field on my Home Page to filter through all of my articles.

Change button text on Click using JavaScript

# Table of Contents