How to change button text JavaScript?

In this article, you are going to learn to change the button text in JavaScript. Also, we will discuss the different methods to get this functionality with JavaScript, offering you with step-by-step instructions and real-life examples.

How to change text on button click in JavaScript?

In this part, we will explore different ways to change button text using JavaScript.

Each method comes with its own advantages and uses cases, providing you the flexibility to select the one that fits your specific requirements.

InnerHTML Manipulation

One of the easiest methods to change button text is by performing the innerHTML property of the button element.

Here’s an example code:

<button id="btnValue">Login</button>

const createButton = document.getElementById('btnValue');
button.innerHTML = 'Add Value';

TextContent Modification

A different way is to use the textContent property to change the button text:

Let’s see an example code:

const createButton = document.getElementById('btnValue');
button.innerHTML = 'Update Value';

CreateTextNode Method

The createTextNode method enables you to make a new text node and replace the existing button text with it:

const createButton = document.getElementById('btnValue');
const addValue = document.createTextNode('Change Value');
createButton.innerHTML = '';
createButton.appendChild(addValue);

Button Value Change

Another method to change the button text is by updating its value attribute:

const createButton = document.getElementById('btnValue');
button.value = 'Changed Value';

Using JQuery

If your project includes jQuery, you can use its simplicity to change button text:

$('#btnValue').text('Modified Value');

CSS Class Replacement

This method required creating different CSS classes, each with distinct button text, and then swapping classes using JavaScript:

In your index.html:

<button id="btnValue" class="default">Login</button>

In your style.css:

/* CSS */
.default::after {
  content: "Default Text";
}

.alternate::after {
  content: "Alternate Text";
}

In your index.js:

const createValue = document.getElementById('btnValue');
button.classList.toggle('default');
button.classList.toggle('alternate');

Using Event Listeners

Event listeners are important in web development as they allow us to trigger functions when specific events occur.

In this part, we will explore how to change button text using event listeners.

Click Event Listener

By adding a click event listener to the button, you can constantly change its text whenever it’s clicked:

const createButton = document.getElementById('btnValue');
button.addEventListener('click', () => {
  button.innerHTML = 'Clicked!';
});

Mouseover Event Listener

The mouseover event listener enables you to change the button text when the user hovers over the button:

const createButton = document.getElementById('btnValue');
button.addEventListener('mouseover', () => {
  button.innerHTML = 'Hovering!';
});

Form Submission Event

In form of cases, you can change the button text on form submission to offer feedback to users:

Index.html:

<form>
  <!-- form fields -->
  <button id="submitBtn" type="submit">Submit</button>
</form>

Index.js:

const submitButton = document.getElementById('submitBtn');
submitButton.addEventListener('click', (event) => {
  event.preventDefault();
  submitButton.innerHTML = 'Submitting...';

});

FAQs

Conclusion

In conclusion, we have explored different methods to change button text in JavaScript.

Whether you choose direct manipulation, event-driven changes, or using the third-party libraries, JavaScript provides a functionality range of options for dynamic button text modifications.

Additional Resources

• Protobuf JavaScript: A Guide to Efficient Data Serialization
• What is Rhino JavaScript?
• How to use MD5 hashes in JavaScript

Adones Evangelista

Programmer & Technical Writer at PIES IT Solution

Adones Evangelista is a programmer and writer at PIES IT Solution, author of over 900 tutorials and error-fix guides at itsourcecode.com. Specializes in JavaScript, Django, Laravel, and Python error debugging covering ValueError, TypeError, AttributeError, ModuleNotFoundError, and RuntimeError, plus C/C++ and PHP capstone projects for BSIT students.

Expertise: JavaScript · Python · Django · Laravel · Error Debugging · C/C++
 · View all posts by Adones Evangelista →