Javascript '；增补列表器'；零误差

javascript中的

addeventlistener

函数有此错误。我有3个文件index.html、movie.html和app.js。我从一个api中得到了电影列表。单击index.html文件上的“电影详细信息”按钮后，我希望重定向到movie.html文件，并使用api中的电影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)
        }
    }
} 

document.getElementById（“searchForm”）.addEventListener（“提交”，loadMovies）；
功能加载电影（e）{
让输入=document.getElementById（“searchText”）；
const xhr=new XMLHttpRequest（）；
打开（“获取”`https://api.themoviedb.org/3/search/movie?api_key=b94d8dbb7dcd23af16414e00a058c9ad&language=en-US&query=${input.value}`，true）；
xhr.onload=函数（）{
如果（this.status==200）{
让movies=document.getElementById（“movies”）；
movies.innerHTML=“”；
让res=JSON.parse（this.responseText）；
res.results.forEach（函数（电影）{
movies.innerHTML+=`
${movie.title}
`;
});
}否则{
console.log（“找不到电影”）；
}
}
xhr.send（）；
e、 预防默认值（）；
}
功能选定影片（id）{
sessionStorage.setItem（'movieId'，id）；
window.location='movie.html'；
返回false；
}
函数getMovie（）{
让movieId=sessionStorage.getItem（'movieId'）；
//向具有给定ID的用户发出请求
const xhr=new XMLHttpRequest（）；
打开（“获取”`https://api.themoviedb.org/3/movie/${movieId}？api_key=b94d8dbb7dcd23af16414e00a058c9ad`）
xhr.onload=函数（）{
如果（this.status==200）{
让movie=JSON.parse（response.data）；
Console.log（电影）
}
}
} 

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>

getMovie（）；

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时执行它：在遇到

标记之前。因此，此时尝试获取对该元素的引用将产生

null

---

因此，您必须找到一种方法，直到文档加载完毕。一种方法是将脚本放在正文的底部，另一种方法是将代码包装在浏览器加载文档时触发的事件处理程序中：是标准事件。

这可能正是错误消息告诉您的：

document.getElementById（“searchForm”）

在您尝试引用它时不存在。在执行JS代码时，您的表单可能尚未加载。您需要等待DOM加载。然后请发布错误和行号（来自相关JS文件）。这是我在将代码替换为您在上面建议的“app.JS:2 Uncaught TypeError:无法读取app.JS:2处null的属性'addEventListener'后遇到的错误您确定要将脚本加载到与HTML相同的页面中吗？试着在jsfiddle上发布你的while代码。我有两个html文件，index.html和movie.html。app.js文件位于两个html文件的正文中。下面是fiddlejs上代码的链接，我不知道如何添加多个html文件，我添加了index.html和app.js代码。我是第一次使用该网站。。谢谢