How to check if menu items exist in Joomla, JS only

Question

I'm a js newbie and I want to check, if a specific menu item exists. I'm using Joomla and want to realise this task with js, but not jquery. So if this menu item isn't there, I want to change style.width (enlarge) of the other menu items. If it's there, I want to reduce the width of all menu items. Additionally i want to add an onclick event on this specific menu item. This should generate an art of lightbox popup, article preview or sth. with the class "popup" like that. The Css is not the problem, but to display onclick does not work. The popup container i want to show is hidden by default and got it's right position. In Joomla, i gave my specific menu item the class "offerItem". First, to switch between display visibility i used this code, but it doesn't worked so far.

 document.getElementByClassname("offerItem").addEventListener("click", popup); function popup(){ var z = document.getElementByClassname("popup"); if (z.style.display === "none"){ z.style.display = "block"; } else { z.style.display = "none"; } } 

Answer 1

There's a typo in your code:

document.getElementsByClassName('offerItem') // <- Wrong spelling

 document.getElementsByClassName("offerItem").addEventListener("click", popup); function popup(){ var z = document.getElementsByClassName("popup"); if (z.style.display === "none"){ z.style.display = "block"; } else { z.style.display = "none"; } }