Change button text on Click using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

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

change button text on click

We added a click event listener to the button.

We use the textContent property to change the button's text every time it's clicked.

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

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.

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.

Use the search field on my Home Page to filter through my more than 3,000 articles.