Toggle Button Text with JavaScript

In this tutorial we will see how to Toggle Button Text with JavaScript. HTML DOM innerText Property, textContent property and innerHTML can be used for this purpose.

Table of Contents

• HTML Code
• JavaScript Code
• Demo
• Video Tutorial
• More JavaScript Tutorials

HTML Code

HTML code is given below, in this code we have a button tag with onclick event to trigger a JavaScript function.

<button onclick="toggleText(this)">New</button> 

JavaScript Code

JavaScript Code is given, in this code we have used HTML DOM textContent property, innerText property and innerHTML property.

textContent property sets or returns the text content of the HTML element.

innerText property also sets or returns the text content of the HTML element.

innerHTML property sets or returns the HTML content of the HTML element.

In this example we have used textContent property and innerText property to read the current text of HTML Button, both these properties are used together so that the code works on all browsers.

Then simple if else statement is used to check the text and based on this new text is assigned using innerHTML property.

<script>
function toggleText(event)
{
    var text = event.textContent || event.innerText;
    if(text == 'New')
    {
      event.innerHTML = 'Old';
    }
    else
    {
      event.innerHTML = 'New';   
    }
}
</script>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Toggle Button Text with JavaScript.