Add Class On Click Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

29

Share

Adding a Class to an Element on Click Using JavaScript

This article will guide you on how to add a class to an HTML element when it is clicked using JavaScript. This technique is commonly used to create interactive elements, change styles, or trigger specific behaviors.

Understanding the Concept

JavaScript allows us to manipulate HTML elements dynamically, including adding or removing classes. Classes are used in CSS to define styles for elements. By adding a class to an element on click, we can instantly apply a new set of styles to that element.

Implementing the Solution

Here's a basic example of adding a class to a button when it is clicked:

  
  
  
  



  Click Me

  

Explanation:

1. HTML: We have a simple button with an id of myButton.
2. CSS: We define a CSS class named active which will change the button's background color and text color when applied.
3. JavaScript:
   • We select the button element using document.getElementById().
   • We use addEventListener to attach a click event listener to the button.
   • When the button is clicked, the function inside the event listener is executed.
   • classList.add('active') adds the active class to the button.

Additional Notes

• Removing a Class: You can use classList.remove('className') to remove a class from an element.
• Toggles: You can use classList.toggle('className') to add or remove a class based on its current state.
• Multiple Classes: You can add multiple classes by calling classList.add() multiple times or by passing an array of class names.

Conclusion

This simple example demonstrates how to add a class to an element on click using JavaScript. By combining this technique with CSS styles, you can create dynamic and engaging user interfaces.