I am having trouble with two functions in my app that create different HTML structures. I want to close the info button event when the menu_div button is clicked, and vice versa. Can anyone provide some help?
const menu_div = document.createElement("button");
const info = document.createElement("button");
const Restaurant_info = () => {
info.classList.add("info");
document.body.appendChild(info);
const info_h3 = document.createElement("div");
info_h3.textContent = "INFO";
info_h3.classList.add("info-h3");
info.appendChild(info_h3);
return info;
}
const menu = () => {
menu_div.classList.add("menu-table");
document.body.appendChild(menu_div);
const h3 = document.createElement("div");
h3.textContent = "MENU";
h3.classList.add("h3");
menu_div.appendChild(h3);
return menu_div;
}
document.body.append(header());
menu();
Restaurant_info();
info.addEventListener("click", location_info, {once: true, passive: true});
menu_div.addEventListener("click", () => {
info.removeEventListener("click", location_info, {passive: true});
createMenu();
}, {once: true});