addEventListener не применяется к элементу (даже если он через код), но ошибки не отображается - PullRequest
Новая
       19

addEventListener не применяется к элементу (даже если он через код), но ошибки не отображается

0 голосов
/ 06 февраля 2020

У меня проблемы с добавлением прослушивателя событий к элементу, который я уже выбрал, и у него уже есть console.log (ed) элемент наверняка.

Строка комментария 12 (проблема, addEventListener не применяется к элементу, хотя я выбрал правильный элемент) ...

Комментарии в Js объясняют последовательность действий простая программа шаг за шагом, с момента нажатия кнопки. 

// 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`;
});

Ответы [ 2 ]

1 голос
/ 07 февраля 2020

Как уже сообщалось, добавление элементов в dom с помощью element.innerHTML += '<td>new stuff</td>') не является хорошей стратегией. Таким образом, добавляется только текст элемента.

Вместо этого вам нужно создать элемент, добавить прослушиватель событий, а затем добавить новый элемент в какой-то другой элемент в dom, т. Е. С помощью методов документов createElement и appendChild.

Если вы имеете дело со столом, вы также можете использовать insertRow и insertCell. Проверьте фрагмент ниже. 

let btnShowPlanets = document.querySelector("button"); 
let tBodyPlanetFilms = document.getElementById('planetsFilms')

btnShowPlanets.addEventListener("click", () =>{
  fetch("https://swapi.co/api/planets/?page=1") // 3
  .then(response => response.json()) // 4 
  .then(responseObj => { // 5
    responseObj.results.forEach((obj, i) => {
      const row = tBodyPlanetFilms.insertRow(i + 1)
      const cell1 = row.insertCell(0)
      cell1.innerHTML = obj.name
      const cell2 = row.insertCell(1)
      cell2.addEventListener('click', () => console.log("clicked on " + obj.name + "'s movies"))
      cell2.innerHTML = obj.films.join(', ')
    })
  })
  btnShowPlanets.style.display = `none`;
});
<body>
    <button style="cursor: pointer;">Show Planets</button>
    <table border="5px" id="planetsFilms">
        <thead>
            <th>Planets: </th>
            <th>Film links: </th>
        </thead>
        <tbody></tbody>
    </table> 
</body>
0 голосов
/ 06 февраля 2020

Вы не вставляете созданные вами элементы td в dom. Вы используете inner HTML для вставки строкового представления элементов, что приводит к созданию нового элемента td dom. Вам следует рассмотреть возможность использования appendChild вместо внутреннего HTML для добавления элементов td.

...