我正在为一个单一项目建立这个网站，我遇到了以下问题。我有一个数组的电影显示在主页上的flexxbox。我需要在点击电影海报时运行一些代码，所以我向电影div添加了一个事件监听器。但是现在，当我运行网站时(不单击任何地方)，每个电影的eventlistener都会被触发。当我点击图片时，什么也没发生……我哪里做错了?提前感谢你的帮助!!
class Movie {
constructor(title, image, description, duration, release, age, schedule, seats) {
this.title = title;
this.image = image;
this.description = description;
this.duration = duration;
this.release = release;
this.age = age;
this.schedule = schedule; //dictionary met alle tijden per dag.
this.seats = seats;
}
}
const blankMovie = new Movie(
"Blank",
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAAC8CAMAAAC672BgAAAAA1BMVEWxrq37BefPAAAARklEQVR4nO3BAQEAAACAkP6v7ggKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoAbFjAAB3KzK6gAAAABJRU5ErkJggg==",
"blank",
"blank"
);
var allMovies = [blankMovie, blankMovie, blankMovie, blankMovie];
const homePage = document.getElementById("movie-slider");
for (let i = 0; i < allMovies.length; i++) {
const movieDiv = document.createElement("div");
movieDiv.className = "movie-banner";
const movieTitle = document.createElement("span");
movieTitle.className = "movie-banner__title";
movieTitle.textContent = allMovies[i].title;
const movieImage = document.createElement("img");
movieImage.className = "movie-banner__image";
movieImage.src = allMovies[i].image;
const movieDur = document.createElement("span");
movieDur.className = "movie-banner__desc";
movieDur.textContent = allMovies[i].duration;
homePage.appendChild(movieDiv);
movieDiv.appendChild(movieTitle);
movieDiv.appendChild(movieImage);
movieDiv.appendChild(movieDur);
movieDiv.addEventListener("click", console.log(i));
}body {
margin: 0;
font-family: 'Teko', sans-serif;
}
#movie-slider {
display: flex;
flex-direction: row;
overflow: auto;
gap: 10px;
padding: 0% 10%;
}
#movie-slider::-webkit-scrollbar {
height: 0;
}
.movie-banner {
flex-basis: 250px;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.movie-banner__image {
object-fit: cover;
height: 100px;
}
.movie-banner__title {
color: wheat;
text-align: center;
font-family: 'Bebas Neue', cursive;
font-size: 2em;
padding: 10px
}
.movie-banner__desc {
color: wheat;
font-size: 1.3em;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Movie Tickets</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Teko:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/general.css">
<!--<link rel="icon" href="../images/general/logo.jpg">-->
</head>
<body>
<article class="content">
<section id="movie-slider">
</section>
</article>
<script src="/js/index.js" type="module"></script>
<script src="/js/general.js" type="module"></script>
</body>
</html>您需要将点击逻辑包装在函数处理程序中:
class Movie {
constructor(title, image, description, duration, release, age, schedule, seats) {
this.title = title;
this.image = image;
this.description = description;
this.duration = duration;
this.release = release;
this.age = age;
this.schedule = schedule; //dictionary met alle tijden per dag.
this.seats = seats;
}
}
const blankMovie = new Movie(
"Blank",
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAAC8CAMAAAC672BgAAAAA1BMVEWxrq37BefPAAAARklEQVR4nO3BAQEAAACAkP6v7ggKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoAbFjAAB3KzK6gAAAABJRU5ErkJggg==",
"blank",
"blank"
);
var allMovies = [blankMovie, blankMovie, blankMovie, blankMovie];
const homePage = document.getElementById("movie-slider");
for (let i = 0; i < allMovies.length; i++) {
const movieDiv = document.createElement("div");
movieDiv.className = "movie-banner";
const movieTitle = document.createElement("span");
movieTitle.className = "movie-banner__title";
movieTitle.textContent = allMovies[i].title;
const movieImage = document.createElement("img");
movieImage.className = "movie-banner__image";
movieImage.src = allMovies[i].image;
const movieDur = document.createElement("span");
movieDur.className = "movie-banner__desc";
movieDur.textContent = allMovies[i].duration;
homePage.appendChild(movieDiv);
movieDiv.appendChild(movieTitle);
movieDiv.appendChild(movieImage);
movieDiv.appendChild(movieDur);
movieDiv.addEventListener("click", function() {
console.log(i)
});
}body {
margin: 0;
font-family: 'Teko', sans-serif;
}
#movie-slider {
display: flex;
flex-direction: row;
overflow: auto;
gap: 10px;
padding: 0% 10%;
}
#movie-slider::-webkit-scrollbar {
height: 0;
}
.movie-banner {
flex-basis: 250px;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.movie-banner__image {
object-fit: cover;
height: 100px;
}
.movie-banner__title {
color: wheat;
text-align: center;
font-family: 'Bebas Neue', cursive;
font-size: 2em;
padding: 10px
}
.movie-banner__desc {
color: wheat;
font-size: 1.3em;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Movie Tickets</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Teko:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/general.css">
<!--<link rel="icon" href="../images/general/logo.jpg">-->
</head>
<body>
<article class="content">
<section id="movie-slider">
</section>
</article>
<script src="/js/index.js" type="module"></script>
<script src="/js/general.js" type="module"></script>
</body>
</html>MDN web docs:
addEventListener(type, listener)
listener:
当指定类型的事件发生时接收通知的对象(实现Event接口的对象)。它必须为null，是一个带有handleEvent()方法的对象，或者是一个JavaScript函数。有关回调本身的详细信息，请参阅事件侦听器回调。