I am creating a mock website for a restaurant and in the header i am trying to create tabs that load js modules but i am only able to get it to work the first click and then it stops working. im fairly new and not sure what is causing the issue.
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();
});
please let me know if i need to give more information.
You cannot add an event listener multiple times, that will cause it to fire once. To avoid this, try using onclick. For example, something like this should work:
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();
};
Hoped this helped!