Javascript將事件添加到HTML LI標簽

Question

在下面的函數中，我要單擊LI並在其中警告其值。 我正在使用eventListener，但是函數運行並在頁面加載時發出未定義的警報

請幫忙

 var x = document.getElementsByTagName('li'); function displayText(){ alert(this.innerHTML); } for(var i = 0; i < x.length; i++){ x[i].onclick = displayText(); } 

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 

Answer 1

您正在立即執行功能。

• 如下分配函數： x[i].onclick = displayText;
• 事件參數e包含上下文中的元素： e.target

使用以下修復程序查看此代碼段：

 var x = document.getElementsByTagName('li'); function displayText(e) { alert(e.target.innerHTML); } for (var i = 0; i < x.length; i++) { x[i].onclick = displayText; } 

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 

看到？ 您的代碼現在正在顯示alert 。

資源

• GlobalEventHandlers.onclick

更新：如@James所述，您可以在函數displayText直接使用this因為您具有元素的上下文。

因此，您可以如下實現函數displayText ：

 function displayText() { alert(this.innerHTML); }