how to add event listener to li thats inside a div-CodePudding

sorry, I am new to javascript and I have been trying to figure out how to add an event listener to the three li elements. my issue is that doing document.getElementbyid(about) doesn't work but when I do get element document.getElementbyid(last) it works but the problem is that it works on all three elements. I want to individually target them so that it opens up a different modal.

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>

CodePudding user response：

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

CodePudding user response：

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" >ABOUT CONTENT</div>
<div id="project" >PROJECT CONTENT</div>
<div id="resume" >RESUME CONTENT</div>