JavaScript Change Text of Button on Click

Table of Contents

TL;DR: Here is a code snippet that you can use to change the text of a button when you click on it. There is a full application showing how you can use this in the post.

var button = document.getElementById("buttonExample"); 
button.addEventListener("click", function(){ 
    var newVal = getInput("newValue"); // Either get some input or hard code it
    this.innerText = newVal; 
});

In this post we will look at how we can use JavaScript to change the text of a button when you click on it. We will create an application that has an input box as well as a button, when you click on the button we will take the text from the input box and insert it onto the button.

What we will need for the application

For our application that will change the text of a button on click we will need the following:

  1. An input box
  2. A button

That is it, we will also need the JavaScript code that goes with it of course. In your own application, you could get the input values from anywhere. It could be hard coded, it could be from the server, or it could simply be a toggle where you switch between two values.

Adding the input box

Let us start by adding the input box so that we have some text that we can add to the button when you click on it.

<input id="newValue" ></input>

Adding the button

Next we need the button. You will see when we do the JavaScript code that when the user clicks on it we will change the text of the button based on the input from the input field we just made.

<button id="buttonExample">Some Text</button>

JavaScript Code

There are two functions that we can use to update the text of the button. They are .innerText and .innerHtml. The html version allows you to set a value in an html version, while the .innerText would simply set the text. Because we don’t need to add any html tags or anything like that to our button, we will use the .innerText option.

var button = document.getElementById("buttonExample");

button.addEventListener("click", function(){
    var newVal = getInput("newValue");
    this.innerText = newVal;
});

function getInput(id){
    return document.getElementById(id).value;
}

Working Application

I have embedded the working application here. Type some text in the text box and when you click the button the text in the button will be updated.

When might you use this

Changing the text of a button using JS is not very common, but there are some use cases that I can think of. The first is if you want some sort of on/off concept. When it is on you have it say on, and when you click it to turn off you could say off. You could even change the background color to either red or green to make it more visually pleasing.

There are many other applications of the .innerText method and changing the text of a button with JavaScript. If you want some practice using this technique, you could combine it with changing the url without reloading the page. You could display the text inside the button at the same time as you change the URL.

Related Guides