addEventListener click not working in safari on iOS but works elsewhere-CodePudding

I'm struggling with my menu navbar responsivity. My mobile-menu is supposed to wrap or unwrap based on the click on "hamburger" icon. This works in chrome developer tools and in chrome on phone as well. However doesn't work on iOS safari which is a big deal for me. I paste the code below and in case you wanna check on live server you can find it here(sorry it's not in English but that shouldn't be too much of a problem): http://hustydoucko.freecluster.eu/

Here is my relevant html

<!-- Mobile menu button -->
          <div class="md:hidden flex items-center">
            <button class="outline-none mobile-menu-button cursor-pointer hover:bg-opacity-20">
              <svg
                class="w-6 h-6 text-gray-500"
                x-show="!showMenu"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
              <path d="M4 6h16M4 12h16M4 18h16"></path>
              </svg>
            </button>
          </div>
      </nav>
    <!-- Mobile menu -->
    <div class="hidden mobile-menu">
      <ul class="" style="margin-left: -20px; margin-right: -20px">
        <li><a href="#omne" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">O mně</a></li>
        <li><a href="#cenik" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Ceník</a></li>
        <li><a href="#faq" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">FAQ</a></li>
        <li><a href="#contact" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Kontakt</a></li>
       </ul>
    </div>

And my Javascript

/* MOBILE MENU NAVBAR */

// Grab HTML Elements
const btn = document.querySelector(".mobile-menu-button");
const menu = document.querySelector(".mobile-menu");

// Add Event Listeners
btn.addEventListener("click", () => {
    menu.classList.toggle("hidden");
});

/* END OF MOBILE MENU NAVBAR */

I have tried both “click” and “touchstart” as an option for eventlistener. Safari resists both of them

Please let me know if I should post the code in different way so that it is convenient for the reader. It's my first stackoverflow post with code. Thank you in advance!

CodePudding user response：

"Grab" DOM elements only after DOM was loaded!

Check Documentation page

Show code snippet

// find HTML elements only after DOM loaded!!!! if DOM did't load you can't find it
window.addEventListener('DOMContentLoaded', (event) => {
  // Grab HTML Elements
  const btn = document.querySelector(".mobile-menu-button");
  const menu = document.querySelector(".mobile-menu");

  // Add Event Listeners
  btn.addEventListener("click", () => {
    menu.classList.toggle("hidden");
  });
});

.hidden {
  display: none;
}

<!-- Mobile menu button -->
<div class="md:hidden flex items-center">
  <button class="outline-none mobile-menu-button cursor-pointer hover:bg-opacity-20">
              <svg
                class="w-6 h-6 text-gray-500"
                x-show="!showMenu"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
              <path d="M4 6h16M4 12h16M4 18h16"></path>
              </svg>
            </button>
</div>
</nav>
<!-- Mobile menu -->
<div class="hidden mobile-menu">
  <ul class="" style="margin-left: -20px; margin-right: -20px">
    <li><a href="#omne" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">O mně</a></li>
    <li><a href="#cenik" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Ceník</a></li>
    <li><a href="#faq" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">FAQ</a></li>
    <li><a href="#contact" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Kontakt</a></li>
  </ul>
</div>