Borislav Hadzhiev
Last updated: Jul 25, 2022
Check out my new book
To add a class to the clicked element:
click
event listener on the document
object.target
property on the event
object to get the clicked element.classList.add()
method to add a class to the element.Here is the HTML for the examples in this article.
<!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.
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.
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.
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.
You can pass as many classes to the add()
method as necessary.
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.
document.addEventListener('click', function handleClick(event) { event.target.classList.add( 'bg-yellow', 'second-class', 'third-class' ); event.target.classList.remove( 'second-class', 'third-class' ); });
To add a class to selected elements on click:
document.querySelectorAll()
method.for...of
loop to iterate over the collection.click
event listener to the element that adds a
specific class.Here is the HTML for this example.
<!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.
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 to each element.
We used the add()
method to add a class to the clicked element.