我有带有下拉菜单的引导导航栏:
<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>
而且我有使用TMDb API填充类型的函数:
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);
};
};
}
项目本身是正常创建的。Genres onClick函数无法使用。
我试图将此函数作为onload加载到正文中,但是没有用
您可以轻松做到,这是嘲笑的例子: