Javascript addEventListener未应用于元素（即使通过代码），但未显示任何错误
我在将事件侦听器添加到我已经选择并且已经有console.log（ed）元素的元素时遇到问题 注释行12（虽然我选择了正确的元素，但问题addEventListener未应用于元素） Js中的注释从单击按钮开始，一步一步地解释简单程序的流程Javascript addEventListener未应用于元素（即使通过代码），但未显示任何错误,javascript,asynchronous,dom,fetch,addeventlistener,Javascript,Asynchronous,Dom,Fetch,Addeventlistener,我在将事件侦听器添加到我已经选择并且已经有console.log（ed）元素的元素时遇到问题 注释行12（虽然我选择了正确的元素，但问题addEventListener未应用于元素） Js中的注释从单击按钮开始，一步一步地解释简单程序的流程 // HTML -------------------------------------------------------------------------------------------- <!DOCTYPE html> <ht
// HTML --------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fetching requests</title>
</head>
<body>
<button style="cursor: pointer;">Show Planets</button>
<table border="5px" id="planetsFilms">
<thead>
<th>Planets: </th>
<th>Film titles: </th>
</thead>
<tbody></tbody>
</table>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<script src="script.js"></script>
</body>
</html>
JS ---------------------------------------------------------------------------------------------------
let tBody = document.getElementsByTagName("tbody")[0];
let btnShowPlanets = document.querySelector("button");
let tBodyPlanetFilms = planetsFilms.querySelector("tbody");
let links = [];
let tdLinks = [];
function printThing(resultElement, thing){
resultElement.innerHTML += `<td>${thing}</td>`;
}
function doWork(){ // 2
fetch("https://swapi.co/api/planets/?page=1") // 3
.then(response => response.json()) // 4
.then(responseObj => { // 5
for(let i = 0; i < responseObj.results.length; i++){
printThing(tBodyPlanetFilms, responseObj.results[i].name); // 6 print all names..
for(let y = 0; y < responseObj.results[i].films.length; y++){
links.push(responseObj.results[i].films[y]); // // 7 store all links in array links...
}
}
return new Promise(resolve =>{
resolve(links); // 8 the array links, has all of the links
})
})
.then(links => {
for(let link of links){
let td = document.createElement("td");
td.innerText = link;
tdLinks.push(td); // 9 store all links, as td ELEMENT in an array tdLinks
}
return new Promise(resolve =>{
resolve(tdLinks); // 10 the array tdLinks, has all of the td ELEMENTS (which inside contain the link)
})
})
.then(tdElements =>{
console.log(tdElements);
for(let el of tdElements){
printThing(tBodyPlanetFilms, el.innerHTML); // 11 print each one of the link(thats inside the td element)
}
console.log(tdElements[0]);
tdElements[0].addEventListener("click", () =>{ // 12 add event listener to the first td element
console.log("Clicked? Nope! :/");
});
/*
for(let element of tdElements){ // 13 add event listener to all of the td elements
console.log(element);
element.addEventListener("click", () =>{
console.log("Clicked? Nope.. :(");
})
}
*/
})
}
btnShowPlanets.addEventListener("click", _ =>{
doWork(); // 1
btnShowPlanets.style.display = `none`;
});
//HTML--------------------------------------------------------------------------------------------
获取请求
显示行星
行星：
电影名称：
JS---------------------------------------------------------------------------------------------------
让tBody=document.getElementsByTagName（“tBody”）[0]；
让btnShowPlanets=document.querySelector（“按钮”）；
设tBodyPlanetFilms=PlanetFilms.querySelector（“tbody”）；
让链接=[]；
设tdLinks=[]；
函数printThing（resultElement，thing）{
resultElement.innerHTML+=`${thing}`；
}
函数doWork（）{//2
取回（“https://swapi.co/api/planets/?page=1") // 3
.then（response=>response.json（））//4
.然后（responseObj=>{//5
for（设i=0；i{
解析（链接）；//8数组链接，包含所有链接
})
})
。然后（链接=>{
对于（让链接中的链接）{
设td=document.createElement（“td”）；
td.innerText=链接；
push（td）；//9将所有链接存储为数组tdLinks中的td元素
}
返回新承诺（解决=>{
resolve（tdLinks）；//10数组tdLinks包含所有td元素（其中包含链接）
})
})
。然后（tdElements=>{
console.log（tdElements）；
对于（让el为TDE元件）{
printThing（tBodyPlanetFilms，el.innerHTML）；//11打印每个链接（位于td元素内部）
}
console.log（tdElements[0]）；
tdElements[0]。addEventListener（“单击”，（）=>{//12将事件侦听器添加到第一个td元素
log（“单击？否！：/”；
});
/*
对于（让tdElements中的元素）{//13将事件侦听器添加到所有td元素中
控制台日志（元素）；
元素。addEventListener（“单击”，（）=>{
日志（“单击？否：（”）；
})
}
*/
})
}
btnShowPlanets.addEventListener（“单击”，_=>{
doWork（）；//1
btnShowPlanets.style.display=`none`；
});
< /代码> 您没有插入您创建到DOM中的TD元素。您正在使用INNERHTML插入元素的字符串表示，从而导致新的TD-DOM元素被创建。您应该考虑使用AppDebug而不是INNERHTML来添加您的TD元素。 AS已经发布，将元素添加到DOM中。使用
element.innerHTML+='newstuff'）
不是一个好策略。这样，只添加元素的文本
相反，您必须创建一个元素，添加事件侦听器，然后将新元素添加到dom中的其他元素，即使用documents方法createElement
和appendChild
如果您正在处理一个表，还可以使用insertRow
和insertCell
。查看下面的代码片段
让btnShowPlanets=document.querySelector（“按钮”）；
让tBodyPlanetFilms=document.getElementById（'PlanetFilms'））
btnShowPlanets.addEventListener（“单击”，（）=>{
取回（“https://swapi.co/api/planets/?page=1") // 3
.then（response=>response.json（））//4
.然后（responseObj=>{//5
responseObj.results.forEach（（obj，i）=>{
const row=tBodyPlanetFilms.insertRow（i+1）
const cell1=row.insertCell（0）
cell1.innerHTML=obj.name
常量单元格2=行插入单元格（1）
cell2.addEventListener（'click'，（）=>console.log（“clicked on”+obj.name+“'s movies”））
cell2.innerHTML=obj.films.join（'，'）
})
})
btnShowPlanets.style.display=`none`；
});
显示行星
行星：
电影链接：
谢谢，问题出在printThing函数中，您是对的。innerHTML与addEventListener结合使用时无法正常工作。。。通过创建元素并附加感谢，问题得以解决！谢谢，问题出在printThing函数中，您是对的。innerHTML与addEventListener结合使用时无法正常工作。。。通过创建元素并附加感谢您的帮助，问题得以解决！