1
votes

Comment ajouter une fonction onClick à un div rempli dynamiquement?

J'ai une barre de navigation bootstrap avec la liste déroulante:

async function getGenres() {
    let url = "https://api.themoviedb.org/3/genre/movie/list?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US";
    let response = await fetch(url);
    let genres = await response.json();
    let navbar = document.getElementsByClassName("nav-item dropdown");
    navbar.innerHTML += `<div class="dropdown-menu">`;
    let nav = document.getElementsByClassName("dropdown-menu");
    for (let i = 0; i < genres.genres.length; i++) {
        nav[0].innerHTML += `<a class="dropdown-item" href="#">` + genres.genres[i].name + `</a>`;
    }

//This part should add separately to each element, but it does not work
//Here is error: Cannot set property 'click' of undefined at getGenres

    for (let i = 0; i < genres.genres.length; i++) {
    document.getElementsByClassName("dropdown-menu")[i].click = function () {
        getmovies("discover/movie?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-us&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_genres=" + genres.genres[i].id);
    };
};
}

Et j'ai une fonction qui les remplit de genres avec l'API TMDb:

<ul class="navbar-nav mr-auto">
  <li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria haspopup="true" aria-expanded="false">GANRES</a>
   <div class="dropdown-menu"></div>
  </li>
</ul>

Les éléments eux-mêmes sont créés normalement. Genres La fonction onClick ne fonctionne tout simplement pas.

J'ai essayé de charger cette fonction comme onload dans le corps, mais cela n'a pas fonctionné

javascript api

5 commentaires

Vous n'avez qu'un seul menu déroulant div. Voir ici document.getElementsByClassName ("menu déroulant") [i] .click = . Ce que vous voulez faire, c'est ajouter les clics aux dropdown-items sous dropdown-menu ?

Oui, je veux ajouter les clics aux éléments déroulants sous le menu déroulant

Il semble que vous ne fermez pas votre

. Vous feriez peut-être mieux d'utiliser createElement et appendChild à la place de modifier directement le innerHTML

Pouvez-vous faire quelque chose comme let items = document.getElementsByClassName ("dropdown-item"); puis travailler sur éléments ?

Les éléments eux-mêmes sont créés normalement. La fonction onClick ne fonctionne tout simplement pas.

3 Réponses :

0
votes

Vous pouvez le faire facilement, voici un exemple approximatif. Ajoutez simplement un écouteur d'événements dans votre boucle for

<div id="containter">

</div>

function generateLinks() {
  var container = document.getElementById("containter");
  var textNode;
  var node;
  
  [1,2,3,4,5].forEach(function(i) {
    node = document.createElement("li");
    node.setAttribute("id", i);
    textNode = document.createTextNode("Hello" + i);
    node.appendChild(textNode);
    
    node.addEventListener("click", function() {
        console.log("hello " + i)
    });
  
    container.appendChild(node);
  });


}

generateLinks();

0 commentaires

0
votes

J'ai supprimé les appels d'API pour me concentrer sur le code à l'origine des problèmes:

async function getGenres() {
  const genres = {
    genres: [{ name: "pop" }, { name: "punk" }]
  };

  const navbar = document.getElementsByClassName("nav-item dropdown");
  console.log("navbar", navbar);

  let nav = document.createElement("div");
  nav.className = "dropdown-menu";

  for (let i = 0; i < genres.genres.length; i++) {
    let a_tag = document.createElement("a");
    let link = document.createTextNode(genres.genres[i].name);
    a_tag.appendChild(link);
    a_tag.className = "dropdown-item";
    a_tag.href = "#";
    nav.appendChild(a_tag);
  }
  navbar[0].appendChild(nav);

  //This part should add separately to each element, but it does not work
  //Here is error: Cannot set property 'click' of undefined at getGenres

  const items = document.getElementsByClassName("dropdown-item");
  for (let i = 0; i < genres.genres.length; i++) {
    items[i].addEventListener("click", () => {
      alert("get movies here for name" + genres.genres[i].name);

    });
  }
}

0 commentaires

0
votes

Merci @KiaiFighter. Voici le code final:

async function getGenres() {
        let url = "https://api.themoviedb.org/3/genre/movie/list?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US";
        let response = await fetch(url);
        let genres = await response.json();

        const navbar = document.getElementsByClassName("nav-item dropdown");

        let nav = document.createElement("div");
        nav.className = "dropdown-menu";

        for (let i = 0; i < genres.genres.length; i++) {
            let a_tag = document.createElement("a");
            let link = document.createTextNode(genres.genres[i].name);
            a_tag.appendChild(link);
            a_tag.className = "dropdown-item";
            a_tag.href = "#";
            nav.appendChild(a_tag);
        }
        navbar[0].appendChild(nav);
        console.log("nav", nav);

        const items = document.getElementsByClassName("dropdown-item");
        for (let i = 0; i < genres.genres.length; i++) {
            items[i].addEventListener("click", () => {
                getMovies("discover/movie?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-us&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_genres=" + genres.genres[i].id);
            });
        }

        console.log("navbar", navbar);
    }

0 commentaires