Add a class to the Clicked Element using JavaScript

# Table of Contents

# Add class to clicked Element using JavaScript

To add a class to the clicked element:

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

Here is the HTML for the examples.

index.html

Copied!
<!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>

And here is the related JavaScript code.

index.js

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

add class to clicked element

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.js

Copied!
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.js

Copied!
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.js

Copied!
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:

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

Here is the HTML for this example.

index.html

Copied!
<!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>

And here is the related JavaScript code.

index.js

Copied!
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

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 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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Add a class to the Clicked Element using JavaScript

# Table of Contents

# Add class to clicked Element using JavaScript

# Add multiple classes to clicked Element

# Add class to selected Elements on click

# Additional Resources

Borislav Hadzhiev