In JavaScript, we often want to create customized web pages involving various functionalities for an attractive design. For instance, in the case of notifying the user of any successful operation, warning or error notifications. In such scenarios, changing the button color on click in JavaScript is a significant feature to gain the user’s attention and notify them of the specific alerts beforehand.
This article will discuss the methods to change the color of a button on click in JavaScript.
How to Change the Color of the Button on Click in JavaScript?
To change the color of the button color upon the click in JavaScript, the “style.backgroundColor” property can be used with:
- “onclick” event
- “indexing”
- “querySelector() method
We will now go through each of the listed methodologies one by one!
Method 1: Change Button Color Upon Click in JavaScript Using “onclick” Event
The style.backgroundColor property adjusts the background color of the specified element using color coding. It is applied to set the color with respect to the Red, Green, and Blue (RGB) values. More specifically, you can utilize the “onclick” in such a way that when a button is clicked, the added color code will be applied as its background.
The following example explains the stated concept clearly.
Example
Firstly, create a button with the “button” id. Then, add “onclick” event which will trigger the “buttonColor()” function when the added button is clicked:
Next, declare a function named “buttonColor()”. In its definition, access the button using the document.geElementById() button and apply the style.backgroundColor property to set the button’s color. You can assign any RGB color code as its background:
The above implementation will show the following output:
Want to set more than one background color on a button? If yes, follow the next section!
Method 2: Change Button Color on a Click in JavaScript Using Indexing
“Indexing” is a technique applied to iterate along an array or list items by specifying their indexes. It can be applied to define a set of colors and change the button color with respect to the added elements. More specifically, you can attach an addEventListener() method in such a way when a button is clicked; its background color will be changed according to the added color.
Look at the following example for demonstration.
Example
Firstly, we will create a button with the “Click Here” value:
Next, the button will be accessed by specifying its id in the document.getElementById() method:
Now, the variables index0 and index1 will be declared with the values “0” and “1” respectively:
After that, an array of two colors will be defined and stored in a variable named “colors”:
Finally, a “click” event will be attached to the created button by invoking the “addEventListener()” method. This will work in such a way that when the button is clicked, the buttonColor() method will be invoked, which will change the background color according to the index of the added colors in the array:
As you can see in the given output, when the button is clicked, its background color is first set to “green” then “blue”:
Method 3: Change Button Color Upon Clicking in JavaScript Using “document.querySelector()” Method
The “document.querySelector()” method fetches the first element matching a CSS selector and the “addEventListener()” method includes and applies a specific event to an element. These methods can be utilized to access the button id, add the click event handler, and set the button’s background color.
Look at the following example for demonstration.
Example
In the following example, include a button with the specified value as discussed in the previous methods:
Now, apply the document.querySelector() method to access the button having “success” id:
Lastly, apply the addEventListener() to add an event handler named “click” to the button and set its color to “Light Green” using the style.backgroundColor property:
Output
We have provided the easiest methods for changing button color on click in JavaScript.
Conclusion
To change the button color in JavaScript, you can utilize the style.backgroundColor property with the color code, which is the RGB value. To do so, invoke the document.getElementById() method for accessing the created button and then perform further operations. The document.querySelector() is also used for the same purpose. Moreover, the indexing technique can also be utilized for applying multiple background colors. This manual guided about changing the button’s color on click in JavaScript.
