I have been trying to add an event listener to three li elements. The issue is that doing document.getElementbyid(about) doesn't work. But when I do get element document.getElementbyid(last), it works but on all three elements simultaneously.
I want to target them individually so that it opens up models respective to each li element.
Here is the HTML:
<section>
<h1 id="intro">Hi, My name is</h1>
<div id="last">
<ul>
<li id="about">About</li>
<li id="project">Projects</li>
<li id="resume">Resume</li>
</ul>
</div>
</section>
well like this :
let lis = document.querySelectorAll('section div ul li')
lis.forEach((li) => {
li.addEventListener('click', () => {
})
})
if you want you can handle each li individually like so :
let resume = document.querySelector('#resume')
resume.addEventListener('click', () => {
// do whatever you need
})
the click event here is an exemple, use the event you need, like perhaps mouseover
It is possible to add a click event to each element. You would use querySelectorAll to reference them all. You would then loop over it.
document.querySelectorAll("#last li").forEach(function (li) {
li.addEventListener("click", function () {
console.log("Clicked", li.id);
});
});
A better option is event delegation where you just bind one event.
Here is the basic idea using event delegation. Add one click event listener on a parent. You select the target which is what was clicked and find the link. You can use the link's hash to get the element you want to show.
// Bind one click event to the parent, we will use event delegation
document.getElementById("last").addEventListener("click", function(event) {
// get what was clicked and look for the anchor tag
const anchor = event.target.closest("a");
// did we find an anchor?
if (anchor) {
// hash will have the id of the element to show
showElement(anchor.hash);
}
});
function showElement(selector) {
// do we have an active modal? Yes? Close it
const modalActive = document.querySelector(".modal.active");
if (modalActive) {
modalActive.classList.remove('active');
}
// Enable the modal we just clicked on
const elem = document.querySelector(selector);
if (elem) {
elem.classList.add('active');
}
}
// Page load, if has hash then show that element
const hash = window.location.hash;
if (hash) {
showElement(hash);
}.modal {
display: none;
}
.active {
display: block;
}<section>
<h1 id="intro">Hi, My name is</h1>
<div id="last">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#project">Projects</a></li>
<li><a href="#resume">Resume</a></li>
</ul>
</div>
</section>
<div id="about" class="modal">ABOUT CONTENT</div>
<div id="project" class="modal">PROJECT CONTENT</div>
<div id="resume" class="modal">RESUME CONTENT</div>