He estado tratando de agregar un detector de eventos a tres elementos li . El problema es que hacer document.getElementbyid( about ) no funciona. Pero cuando obtengo el elemento document.getElementbyid ( last ), funciona pero en los tres elementos simultáneamente.
Quiero apuntarlos individualmente para que abra modelos respectivos a cada elemento li .
Aquí está el 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>bueno asi:
let lis = document.querySelectorAll('section div ul li') lis.forEach((li) => { li.addEventListener('click', () => { }) })si lo desea, puede manejar cada li individualmente así:
let resume = document.querySelector('#resume') resume.addEventListener('click', () => { // do whatever you need })el evento de clic aquí es un ejemplo, use el evento que necesita, como quizás el mouseover
Es posible agregar un evento de clic a cada elemento. Usaría querySelectorAll para hacer referencia a todos ellos. Luego lo recorres.
document.querySelectorAll("#last li").forEach(function (li) { li.addEventListener("click", function () { console.log("Clicked", li.id); }); });Una mejor opción es la delegación de eventos en la que solo vincula un evento.
Aquí está la idea básica usando la delegación de eventos. Agregue un detector de eventos de un clic en un padre. Selecciona el objetivo en el que se hizo clic y encuentra el enlace. Puede usar el hash del enlace para obtener el elemento que desea mostrar.
// 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>