June 20, 2020

How to Change Button Class in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to change button class in javascript. In HTML, a class attribute is generally used whenever you want to apply a unique set of styles and formatting to one or more elements. In CSS, we use a CSS selector to select all those elements and define the styles.

Change in a class of an element represents a change in the styles or state of the element. Such things are done to make the web application more user-friendly and enhance the user experience. You must have seen this in almost every website especially in the navigation menu where an active class is applied to the menu item as soon as a user clicks on it.

In javascript, each element has classList property and this property contains two methods add() and remove(). The add() method is for adding a class and remove() method is for removing a class. We are going to take advantage of these methods to accomplish our goal.

In the following example, we have 3 button elements. Upon click of the red button, we will change the color of the third button to red. Similarly, upon click of the blue button, we will change the color to blue. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file (div and button).
The div element is just a wrapper for all 3 button elements.
The first, second, and third button elements have “Red”, “Blue”, and “My Button” as innerText respectively. By default, the third button has a blue color which will be changed dynamically using javascript.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    
</head>
<body>
    <div>
        <button class="btnRed">Red</button>
        <button class="btnBlue">Blue</button>
        <button class="btn blue">My Button</button>
    </div>

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

body {
    text-align: center;
}

div {
    display: inline-block;
}

.btnRed, .btnBlue {
    padding: 5px 10px;
    margin-top: 10px;
}

.btn {
    padding: 10px 30px;
    margin-top: 20px;
    display: block;
    color: #fff;
}

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}

Javascript

We have selected all 3 button elements using the document.querySelector() method and stored them in the btnRed, btnBlue, and myButton variables respectively.
We have attached a click event listener to the red and blue buttons.
In the red button event handler function, we are removing the blue class from the third button element using the remove() method and adding the red class using add() method. This will eventually change the button color from blue to red.
In the blue button event handler function, we are removing the red class from the third button element using the remove() method and adding the blue class using add() method. This will eventually change the button color from red to blue.

let btnRed = document.querySelector('.btnRed');
let btnBlue = document.querySelector('.btnBlue');
let myButton = document.querySelector('.btn');


btnRed.addEventListener('click', () => { 
    myButton.classList.remove('blue');
    myButton.classList.add('red');
});

btnBlue.addEventListener('click', () => { 
    myButton.classList.remove('red');
    myButton.classList.add('blue');
});

You May Also Like: