對我來說，For 回圈和 ForEach 回圈是處理和顯示大資料的兩種最佳方式。問題是我想將一個 eventListener 添加到一個回圈中，你會立即遇到問題。這是我的代碼，它回圈通過 API 提供的陣列并完美地創建 HTML Div。在代碼底部附近，您可以看到我嘗試添加 EventListener 并記錄發生的任何點擊。當我單擊時，我在控制臺中收到此訊息：
[object HTMLDivElement] Has Been Clicked
這意味著它不會從單擊的 div 中提取資訊。
for (i = 0; i < filtered.length-1; i ) {
//Loop through games of Leagues
for (x=0; x<filtered[i].length;x ){
//Create Parent Div For Data
let parent = document.createElement("div")
parent.className = 'parentDiv'
//League Duplication not allowed
if (arrLeagues.includes(filtered[i][x].league.id)) {
} else {
arrLeagues.push(filtered[i][x].league.id)
//League Name
let league = document.createElement("div")
league.className = 'league'
league.innerHTML = filtered[i][x].league.name `<img class='flag' src=${filtered[i][x].league.flag}>`
parent.appendChild(league)
}
//Home Container
let child1 = document.createElement("div")
child1.className = 'childDiv'
//Game Status
let gameStatus = document.createElement("div")
gameStatus.className = 'status'
gameStatus.innerHTML = filtered[i][x].fixture.status.short
parent.appendChild(gameStatus)
//Home Name
let homeTeamName = document.createElement("div")
homeTeamName.className = 'team1'
homeTeamName.innerHTML = filtered[i][x].teams.home.name
parent.appendChild(homeTeamName)
//Home Score
let homeTeamScore = document.createElement("div")
homeTeamScore.className = 'score1'
parent.appendChild(homeTeamScore)
//Away Container
let child2 = document.createElement("div")
child2.className = 'childDiv'
//Away Name
let awayTeamName = document.createElement("div")
awayTeamName.className = 'team2'
awayTeamName.innerHTML = filtered[i][x].teams.away.name
parent.appendChild(awayTeamName)
//Away Score
let awayTeamScore = document.createElement("div")
awayTeamScore.className = 'score2'
parent.appendChild(awayTeamScore)
//My Attempt to add Event Listener
parent.addEventListener("click", function(){
console.log(`${awayTeamName} Has Been Clicked`)
})
//Push all Data to DOM
document.querySelector('.parentContainer').appendChild(parent);
我曾嘗試尋找其他頁面或相關資訊，但似乎并不多。如果您可以將我鏈接到這方面的資訊或解釋如何將 eventListeners 添加到回圈創建的元素中，那就太好了。當然，我什至不知道這是否可能或實用，如果不可能或不切實際，請不要害怕告訴我。
uj5u.com熱心網友回復：
這是可能的，盡管您必須小心使用范圍。let并且const主要解決for回圈的這些問題。
在您的情況下，您可以使用awayTeamName.innerHTML（HTML）或awayTeamName.innerText（文本內容）來輸出 div 的內容，而不是物件本身。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/480431.html
標籤：javascript jQuery json 阿贾克斯 api
上一篇：異步等待后獲取一組Promise