Add Class To Clicked Element Using JavaScript - Bobbyhadz

Home » Add Classname To Element Javascript » Add Class To Clicked Element Using JavaScript - Bobbyhadz

Maybe your like

# Table of Contents

  1. Add class to clicked Element using JavaScript
  2. Add multiple classes to clicked Element
  3. Add class to selected Elements on click

# Add class to clicked Element using JavaScript

To add a class to the clicked element:

  1. Add a click event listener on the document object.
  2. Use the target property on the event object to get the clicked element.
  3. Use the classList.add() method to add a class to the element.

Here is the HTML for the examples.

index.htmlCopied!<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>bobbyhadz.com</title> <style> .bg-yellow { background-color: yellow; } </style> </head> <body> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> <script src="index.js"></script> </body> </html> The code for this article is available on GitHub

And here is the related JavaScript code.

index.jsCopied!document.addEventListener('click', function handleClick(event) { event.target.classList.add('bg-yellow'); });

add class to clicked element

The code for this article is available on GitHub

We added a click event listener to the document object, so any time an element is clicked, the handleClick function is invoked.

We used the target property on the event object. The target property is a reference to the object (element) on which the event was dispatched.

In other words, event.target gives us access to the DOM element the user clicked.

You can console.log the target property to see the DOM element which was clicked by the user.

index.jsCopied!document.addEventListener('click', function handleClick(event) { console.log('user clicked: ', event.target); event.target.classList.add('bg-yellow'); });

The last step is to use the classList.add() method to add a class to the clicked element.

If the class is already present on the clicked element, it won't get added twice.

I've also written an article on how to add a class to the body element.

# Add multiple classes to clicked Element

You can pass as many classes to the add() method as necessary.

index.jsCopied!document.addEventListener('click', function handleClick(event) { event.target.classList.add( 'bg-yellow', 'second-class', 'third-class' ); });

If any of the classes are already present on the element, they won't get added a second time.

Similarly, if you need to remove one or more classes, you can use the remove() method.

index.jsCopied!document.addEventListener('click', function handleClick(event) { event.target.classList.add( 'bg-yellow', 'second-class', 'third-class' ); event.target.classList.remove( 'second-class', 'third-class' ); });

If any of the classes are not present on the element, they get ignored.

# Add class to selected Elements on click

To add a class to selected elements on click:

  1. Select a group of elements using the document.querySelectorAll() method.
  2. Use a for...of loop to iterate over the collection.
  3. On each iteration, add a click event listener to the element that adds a specific class.

Here is the HTML for this example.

index.htmlCopied!<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>bobbyhadz.com</title> <style> .bg-yellow { background-color: yellow; } </style> </head> <body> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> <script src="index.js"></script> </body> </html> The code for this article is available on GitHub

And here is the related JavaScript code.

index.jsCopied!const boxes = document.querySelectorAll('.box1, .box2, .box3'); for (const box of boxes) { box.addEventListener('click', function handleClick() { box.classList.add('bg-yellow'); }); }

add class to selected elements on click

The code for this article is available on GitHub

We used the document.querySelectorAll method to select the DOM elements with classes box1, box2 and box3.

We used the for...of loop to iterate over the collection of elements and then added a click event handler to each element.

We used the add() method to add a class to the clicked element.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

  • Add a class to the Body element using JavaScript
  • Add a class to multiple Elements using JavaScript
  • Add class to a parent Element using JavaScript
  • Add event listener to all Elements with Class in JavaScript
  • Disable a specific Keyboard key or all keys using JavaScript
  • The JavaScript equivalent to PHP Echo/Print statements

Tag » Add Classname To Element Javascript