Add class to 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 in this article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <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');
});

We added a click event listener to the document object, so any time an element is clicked, a 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.

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'
  );
});

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'
  );
});

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" />

    <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');
  });
}

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 on each element.

When the specific element is clicked, we used the add() method to add a class to it.

Add class to clicked Element using JavaScript

Table of Contents #

Add class to clicked Element using JavaScript #

Add class to selected Elements on click #

Join my newsletter

Borislav Hadzhiev