EventListener不是函數

Question

嘗試創建一個事件以在點擊頁腳鏈接後觸發。

var hooray = function(event) { 
 
    console.log("hooray"); 
 
}; 
 

 
var footer_link = document.getElementsByClassName('footer-link'); 
 
console.log(footer_link); 
 
footer_link.addEventListener('click', hooray, false);

<li class="footer-link">Title link 
 
    <ul class="footer-link-sub"> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    </ul> 
 
</li>

我得到一個錯誤 「遺漏的類型錯誤：footer_link.addEventListener不是一個函數」。如果eventListener被取出，則控制檯將從標記中記錄正確的li。或者，如果從addEventListener中刪除元素選擇器，則只要按預期方式單擊頁面，它就會觸發。我在做什麼錯選擇元素？

Answer 1

getElementsByClassName返回一個NodeList - 即包含多個元素的列表。

如果你只想要第一個，你需要通過[0]來訪問它。也就是說，通過索引器訪問它。 NodeLists被索引（像數組），所以[0]返回第一個元素，[1]返回第二個元素等 - 在你的情況只有一個元素。

var hooray = function(event) { 
 
    alert("hooray"); 
 
}; 
 

 
var footer_link = document.getElementsByClassName('footer-link'); 
 
console.log(footer_link); 
 
// Note the [0] here 
 
footer_link[0].addEventListener('click', hooray, false);

<li class="footer-link">Title link 
 
    <ul class="footer-link-sub"> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    </ul> 
 
</li>

Answer 2

這是因爲「getElementByClassName」返回一個數組，所以你需要選擇數組的第一個元素。 嘗試使用footer_link[0]

var hooray = function(event) { 
 
    console.log("hooray"); 
 
}; 
 

 
var footer_link = document.getElementsByClassName('footer-link'); 
 
console.log(footer_link); 
 
footer_link[0].addEventListener('click', hooray, false);

<li class="footer-link">Title link 
 
    <ul class="footer-link-sub"> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    </ul> 
 
</li>