Estoy creando un sitio web simulado para un restaurante y en el encabezado estoy tratando de crear pestañas que carguen módulos js, pero solo puedo hacer que funcione con el primer clic y luego deja de funcionar. Soy bastante nuevo y no estoy seguro de qué está causando el problema.
import { renderHomepage } from './homepage' import { renderMenupage } from './menu' import { renderContactpage } from './contact' renderContactpage(); const content = document.querySelector('#content'); const homeTab = document.querySelector("#home"); const menuTab = document.querySelector('#menu'); const contactTab = document.querySelector('#contact'); const secondMenu = document.querySelector('#secondMenu'); console.log(menuTab); const removeDOM = () => { content.innerHTML = ``; } homeTab.addEventListener('click', () => { removeDOM(); renderHomepage(); }); menuTab.addEventListener('click', () => { removeDOM() renderMenupage() }); contactTab.addEventListener('click', () => { removeDOM() renderContactpage() }); secondMenu.addEventListener("click", () => { removeDOM(); renderMenupage(); });por favor, hágamelo saber si necesito dar más información.
No puede agregar un detector de eventos varias veces, eso hará que se active una vez. Para evitar esto, intente usar onclick . Por ejemplo, algo como esto debería funcionar:
import { renderHomepage } from './homepage'; import { renderMenupage } from './menu'; import { renderContactpage } from './contact'; renderContactpage(); const content = document.querySelector('#content'); const homeTab = document.querySelector("#home"); const menuTab = document.querySelector('#menu'); const contactTab = document.querySelector('#contact'); const secondMenu = document.querySelector('#secondMenu'); console.log(menuTab); const removeDOM = () => { content.innerHTML = ''; } homeTab.onclick = () => { removeDOM(); renderHomepage(); }; menuTab.onclick = () => { removeDOM() renderMenupage() }; contactTab.onclick = () => { removeDOM() renderContactpage() }; secondMenu.onclick = () => { removeDOM(); renderMenupage(); };¡Esperaba que esto ayudara!