How to Change a Button's Text on Click in JavaScript

Changing the text of a button after a user clicks it is a fundamental UI interaction. It provides clear feedback that an action has been taken, such as changing from "Submit" to "Submitting..." or "Play" to "Pause."

This guide will teach you the standard method for changing a button's text using a click event listener. You will learn the important difference between using textContent for plain text and innerHTML for HTML content, and then see how to "toggle" the button's text back and forth between two states on each click.

Core Task: Handling a Click Event

The first step is always to select the button element from the DOM and attach a click event listener to it. This listener will execute a function whenever the user clicks the button.

First, we need a button in our HTML with a unique ID so we can select it.

<!DOCTYPE html>
<html>
  <body>
    <button id="action-button">Click me</button>

    <script src="index.js"></script>
  </body>
</html>

// 1. Select the button from the DOM
const btn = document.getElementById('action-button');

// 2. Add a 'click' event listener
btn.addEventListener('click', function() {
  // 3. This code will run every time the button is clicked
  console.log('Button was clicked!');
});

Solution 1: Change the Text on the First Click

Once the event listener is set up, changing the button's text is as simple as setting its textContent property to a new string.

const btn = document.getElementById('action-button');

btn.addEventListener('click', function handleClick() {
  // Set the button's text content to a new value
  btn.textContent = 'Button clicked!';
});

textContent vs. innerHTML: An Important Distinction

JavaScript gives you two main properties for changing an element's content, and it's crucial to know the difference.

• textContent: This property gets or sets the plain text content of an element. It automatically ignores any HTML tags, making it fast and secure. This is the recommended method for changing simple text.
• innerHTML: This property gets or sets the full HTML content inside an element. It allows you to add other HTML elements, like <span>s or <i>cons.

Solution 2: Toggle the Button Text on Every Click

To make the button's text switch back and forth between two states (e.g., "Play" and "Pause"), you can add a simple conditional check inside your event handler.

The logic:

1. Define the two text states (e.g., "initial" and "clicked").
2. Inside the click handler, check the button's current textContent.
3. If it matches the initial text, change it to the "clicked" text.
4. Otherwise, change it back to the initial text.

const btn = document.getElementById('action-button');

const initialText = 'Play';
const toggledText = 'Pause';

// Set the initial text
btn.textContent = initialText;

btn.addEventListener('click', function handleClick() {
  if (btn.textContent === initialText) {
    btn.textContent = toggledText;
  } else {
    btn.textContent = initialText;
  }
});

Conclusion

Changing a button's text on click is a fundamental UI programming task that is easily accomplished in JavaScript.

To do it successfully:

1. Select the button from the DOM using a method like document.getElementById().
2. Add a click event listener with addEventListener('click', function() { ... }).
3. Inside the handler function, set the .textContent property to change the button's plain text.
4. Use the .innerHTML property only when you need to add HTML elements inside the button.
5. For toggling text, use an if/else statement inside the handler to check the current text and set it to the alternative.