How to Toggle a Button in JavaScript

Toggling is a concept in JavaScript to change any property of an element alternatively or navigate to a specific operation. JavaScript can toggle between multiple properties such as background color, button, text, and font size. This toggling effect can be associated with a button that is easier for the clients to execute. This post has demonstrated the way to toggle a button in JavaScript with the following learning outcomes:

How to Toggle a Button in JavaScript?
Example 1: Modifying Text Messages by Toggling a Button
Example 2: Toggling ON/OFF Button in JavaScript

How to Toggle a Button in JavaScript?

A conditional statement is a basic requirement for toggling a button in JavaScript. To achieve this, you need to get the element and then some custom function is applied to apply some specific operation on that element. The function is associated with the onclick event of the button. So that, whenever the button is clicked, that function will be executed. Let’s practice some examples to toggle a button in JavaScript.

Example 1: Modifying Text Messages by Toggling a Button

An example is considered to modify a message by toggling a button in JavaScript. The example comprises HTML and JavaScript code, which are explained below:

HTML code

<html>

<h2>Example to toggle a button</h2>

<div id="js">Press Button to see magic</div>

<button onclick="btntog()"> Button</button>

</html>

<script src="test.js"></script>

In HTML code, the description is as follows:

A <div> tag is created with an “id=js”.
After that, a button is created associated with a “btntog()” method. By pressing “Button”, the method “btntog()” is triggered.
In the end, the JavaScript file “test.js” is passed as src within <script> tags.

The code for the JavaScript file “test.js” is provided here:

JavaScript code

functionbtntog()
{
var t = document.getElementById("js");
if(t.innerHTML=="Welcome to Linuxhint"){
t.innerHTML="JavaScript World";}
else{
t.innerHTML="Welcome to Linuxhint";}
}

In this code:

getElementById is utilized to extract the HTML element “js” and the value is stored in a variable “t”.
After that, the innerHTML property is employed in the if condition to check the text “Welcome to Linuxhint”.
If the condition is true, the content “Welcome to Linuxhint” is replaced with “JavaScript World“.
If the condition is false, the text “Welcome to Linuxhint” is assigned as HTML content to the div tag.

Output

The output shows that toggling a button returns two messages as “Welcome to Linuxhint” and “JavaScript World” alternatively.

Example 2: Toggling ON/OFF Button in JavaScript

An example is followed to change the inline text of the button. In this example, the “ON/OFF” text will alternatively change the value by pressing the button. The HTML and JavaScript codes are provided here:

HTML code

<html>

<h2>Example to toggle a button</h2>

<input type="button" id="myBtn" value="OFF"

onclick="tgl();">

<script src="test.js"></script>

</html>

The above code is described as:

A clickable button having an id of “myBtn” is created and its value is set to “OFF”.
By pressing the button, the tgl() method will be triggered.
In the end, “test.js” is attached to the source path within <script> tag.

JavaScript code

functiontgl()
{
var t = document.getElementById("myBtn");
if(t.value=="ON"){
t.value="OFF";}
elseif(t.value=="OFF"){
t.value="ON";}
}

In this code:

A tgl() method is utilized to toggle a button in JavaScript.
In this method, you extract the HTML element by employing the getElementById property, and then the if else-if statement is added to it.
If the “value==ON”, toggle the value to “OFF”. If the value is OFF, then the value will be toggled to “ON”.

Output

The output shows that the button has been toggled from OFF to ON.

That is all! You have learned to toggle a button in JavaScript.

Conclusion

In JavaScript, a button can be used to toggle between various states of its own values, or any function can be associated with the toggle operation. The onclick() event of the button is associated with the function. This article explains an overview of toggling a button along with two practical examples. The first example extracts the text by the innerHTML property and modifies it through a toggle button. In the second example, the value of the button itself is changed using a custom function.

How to Toggle a Button in JavaScript