document.querySelectorAllとdocument.getElementsByClassNameイベント処理

Question

返された結果の各項目のループを通じて、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 error object has no method addEventListenerと例を実装していますが、まだ問題を抱えています。

これは簡単だと思いますが、間違っていますか？

Answer 1

あなたがループ内でのインデックスが欠落している（[i]）

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

注：querySelectorAllとgetElementsByClassNameは両方のトリックを行う必要があります。それらはそれぞれNodeListまたはHTMLCollectionを返しますが、どちらも単純なforループをサポートしています。