document.querySelectorAll和document.getElementsByClassName事件处理

我无法document.querySelectorAll通过返回结果中每个项目的循环将事件处理程序分配给元素。我不知道我在做什么错。看起来像这样：

// divs to show/hide
const mobileNavOpen = document.querySelector(".mobile-nav-open");
const mobileNavClose = document.querySelector(".mobile-nav-close");

// mobile menu/search overlay
const mobileNavItems = document.getElementById("global-nav--mobile");
const searchOverlay = document.getElementById("search-overlay");

// search unit open/close buttons

// this line I think is broken
const navSearch = document.querySelectorAll(".global-nav__search-icon");

// this one doesn't work either
const navSearch = document.getElementsByClassName("global-nav__search-icon");

const searchCloseButton = document.querySelector(".search-overlay__close");


function mobileOpen(event) {
  event.preventDefault();
  mobileNavItems.classList.add("show");
}

function mobileClose(event) {
  event.preventDefault();
  mobileNavItems.classList.remove("show");
}

function searchOpen(event) {
  event.preventDefault();
  searchOverlay.classList.add("show");
}

function searchClose(event) {
  event.preventDefault();
  searchOverlay.classList.remove("show");
}

mobileNavOpen.addEventListener("click", mobileOpen);
mobileNavClose.addEventListener("click", mobileClose);

for (var i = 0; i < navSearch.length; i++) {
  navSearch.addEventListener("click", searchOpen);
}

searchCloseButton.addEventListener("click", searchClose);

标记：

<nav id="global-nav">
    <a href="#" class="mobile-nav-open">+</a>
    <a class="global-nav__logo" href="/"><img src="/images/logo.png" alt=""></a>
    <img class="global-nav__search-icon mobile-search" src="images/search-icon.png" alt="" style="height: 32px;">
    <ul class="global-nav__items">
      <li><a href="/item1">item 1</a></li>
      <li><a href="/item2">item 2</a></li>
      <li> <a href="#">item 3</a> </li>
      <li> <a href="#">item 4</a> </li>
    </ul>
    <ul class="global-nav__items" id="login-signup">
      <li class="global-nav__search-icon"><img src="images/search-icon.png" alt=""></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Sign Up</a></li>
    </ul>
</nav>

我找到了这个答案：JS错误对象没有方法addEventListener，正在实现示例，但仍然有问题。

这应该很容易，我在做什么错？