. Advertisement .
..3..
. Advertisement .
..4..
Along with CSS and HTML, the computer language which is called JavaScript, or JS, is one of the foundational elements of the World Wide Web. It is a text-based programming language that can be used to build interactive web pages on both the client and server sides. In this blog, we will give you some useful knowledge about How to add class to clicked Element using JavaScript. Read on it to open your knowledge.
How to add class to clicked Element using JavaScript
Solution 1: On the document object, add a listener for the click event
To add class to clicked Element using JavaScript, you must follow these steps:
On the document object, add a listener for the click event. To obtain the clicked element, use the event object’s target attribute. To add a class to the element, use the classList.add()
function.
The HTML for the instances in this article is provided here.
<!DOCTYPE html>
<html lang="en">
<title>Add class to clicked Element using JavaScript</title>
<head>
<meta charset="UTF-8" />
<style>
.bg-greenyellow {
background-color: greenyellow;
}
</style>
</head>
<body>
<button type="planet1">Mercury</button><br>
<br><button type="planet2">Venus</button><br>
<br><button type="planet3">Earth</button><br>
<br><button type="planet4">Mars</button><br>
<br><button type="planet5">Jupiter</button>
<script src="main.js"></script>
</body>
</html>
And the relevant JavaScript code is located here.
document.addEventListener('click', function handleClick(event) {
event.target.classList.add('bg-greenyellow');
});
Output:
......... ADVERTISEMENT .........
..8..
The document object now has a click event listener, which means that whenever an element is clicked, a function is called. On the event object, we used the target property. The event’s dispatched object (or element) is referenced by the target property. In other words, we have accessed to the DOM element the user clicked thanks to event.target. You may comfort. To observe the DOM element that was clicked by the user, log the target property.
document.addEventListener('click', function handleClick(event) {
console.log('mouse clicked position: ', event.target);
event.target.classList.add('bg-greenyellow');
});
Output:
In HTML window:
......... ADVERTISEMENT .........
..8..
In Console window:
......... ADVERTISEMENT .........
..8..
The classList.add() method must be used to add a class to the clicked element.
If the class already exists on the clicked element, it won’t be applied twice. Many class arguments as needed are accepted by the add()
method.
document.addEventListener('click', function handleClick(event) {
event.target.classList.add(
'bg-greenyellow',
'secondClass',
'thirdClass',
'fourthClass'
);
});
Similarly, you can use the remove()
method to get rid of one or more classes.
document.addEventListener('click', function handleClick(event) {
event.target.classList.add(
'bg-greenyellow',
'second-class',
'third-class',
'fourthClass'
);
event.target.classList.remove(
'second-class',
'third-class',
'fourthClass'
);
});
Solution 2: Use the document.querySelectorAll() method
Excepting two solutions mentioned above, there is another way for you to add class to clicked Element using JavaScript. Follow the guide below:
Using the document.querySelectorAll() method, select a set of elements. The collection can be iterated over using a for…of loop. Add a click event listener to the element that adds a particular class after each iteration. This example’s HTML is available here.
<!DOCTYPE html>
<html lang="en">
<title>Add class to clicked Element using JavaScript</title>
<head>
<meta charset="UTF-8" />
<style>
.bg-greenyellow {
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="planet1">Mercury</div>
<div class="planet2">Venus</div>
<div class="planet3">Earth</div>
<div class="planet4">Mars</div>
<div class="planet5">Jupiter</div>
<script src="main.js"></script>
</body>
</html>
And the relevant JavaScript code is located here.
const planets = document.querySelectorAll('.planet1, .planet2, .planet3, .planet4, .planet5');
for (const box of planets) {
box.addEventListener('click', function handleClick() {
box.classList.add('bg-greenyellow');
});
}
The document.querySelectorAll
method was used to choose the DOM elements with the classes planet1, planet2, planet, planet4 and planet5.
We added a click event handler to each element and iterated through the collection of elements by using the for…of loop.
The clicked element had a class added to it by using the add()
method.
Conclusion
You can always read this post again when you’re still stuck on How to add class to clicked Element using JavaScript. The options mentioned above are the quickest. In addition, if you still need help or have problems, we have a large population where everyone is usually eager to help. Finally, we wish all of you a wonderful day full of new code alternatives and appreciate your reading time.
Read more
Leave a comment