Change button text on Click using JavaScript

avatar

Borislav Hadzhiev

Wed Jan 05 20222 min read

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 in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <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` */

We added a click event listener to the button.

Every time the button is clicked, we use the textContent property to change its text.

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

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

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

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.

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

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

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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee