我在javascript中使用addeventlistener函数时出现此错误。我有3个文件index.html，movie.html和app.js.我从api获得了电影列表。一旦我点击index.html文件上的电影细节按钮，我想重定向到movie.html文件，并使用api中的movie-id获取电影的详细信息，但是收到以下错误：
app.js：1未捕获的TypeError：无法读取null的属性'addEventListener'
有谁知道这可能会导致我的问题？
app.js文件
document.getElementById("searchForm").addEventListener("submit", loadMovies);
function loadMovies(e) {
let input = document.getElementById("searchText");
const xhr = new XMLHttpRequest();
xhr.open("GET", `https://api.themoviedb.org/3/search/movie?api_key=b94d8dbb7dcd23af16414e00a058c9ad&language=en-US&query=${input.value}`, true);
xhr.onload = function () {
if (this.status === 200) {
let movies = document.getElementById("movies");
movies.innerHTML = "";
let res = JSON.parse(this.responseText);
res.results.forEach(function (movie) {
movies.innerHTML += `
<div class="col-md-3">
<div class="card bg-dark text-center">
<div class="card-block">
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" class="img-fluid">
<h4>${movie.title}</h4>
<a onclick="movieSelected('${movie.id}')" href="#" class="btn btn-primary" id="movie">Movie Details</a>
</div>
</div>
</div>
`;
});
} else {
console.log("Movie not found");
}
}
xhr.send();
e.preventDefault();
}
function movieSelected(id) {
sessionStorage.setItem('movieId', id);
window.location = 'movie.html';
return false;
}
function getMovie() {
let movieId = sessionStorage.getItem('movieId');
// Make a request for a user with a given ID
const xhr = new XMLHttpRequest();
xhr.open("GET", `https://api.themoviedb.org/3/movie/${movieId}?api_key=b94d8dbb7dcd23af16414e00a058c9ad`)
xhr.onload = function () {
if (this.status === 200) {
let movie = JSON.parse(response.data);
Console.log(movie)
}
}
}
movie.html
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MovieInfo</a>
</div>
</div>
</nav>
<div class="container">
<div id="movie" class="well"></div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javacript">
getMovie();
</script>
的index.html
<div class="container mt-5">
<div class="jumbotron bg-dark">
<h3 class="text-center">Search For Any Movie</h3>
<form id="searchForm">
<input type="text" class="form-control" id="searchText" placeholder="Search Movie....">
</form>
</div>
</div>
<div class="container">
<div id="movies" class="row"></div>
</div>
等到DOM加载后再定位表单元素。
window.addEventListener('DOMContentLoaded', function() {
document.getElementById("searchForm").addEventListener("submit", loadMovies);
});
浏览器将在遇到它时执行您的JavaScript：这是在它遇到<body>标记之前。因此，此时尝试获取对该元素的引用会产生null。
因此，您必须找到一种方法，直到文档加载完毕。一种方法是将脚本放在主体的底部，另一种方法是将代码包装在浏览器加载文档时触发的事件处理程序中：DOMContentLoaded是标准事件。