Невозможно загрузить функцию API при загрузке страницы - Javascript - PullRequest
Новая
       22

Невозможно загрузить функцию API при загрузке страницы - Javascript

2 голосов
/ 13 апреля 2019

Я пытаюсь получить информацию из TheMovieDB.org с помощью API, я сделал простой код для этого, но он работает, когда я добавляю событие click к кнопке / гиперссылке, затем он отображает все NowPlayingMovies.Я хочу, чтобы веб-страница теперь отображала воспроизводимые фильмы сама по себе без необходимости нажимать кнопку.

Я попытался использовать функцию window.onload, поместить весь код в одну функцию и убрать необходимость нажимать на кнопку.гиперссылка, но я не могу это сделать, и код не работает и показывает различные ошибки.Может кто-нибудь, пожалуйста, помогите мне это исправить?

window.onload = function updateLatestMovies() {

const xhr = new XMLHttpRequest();
const nowPlayingButton = document.querySelector("#nowPlayingButton");
  
  const endPoint = `https://api.themoviedb.org/3/movie/now_playing?api_key=6a879a78d6083b8f3ba308233e0de85b&language=en-US&page=1`;
  xhr.open("GET", endPoint);
  xhr.send();
  xhr.addEventListener("readystatechange", updateLatestMovies);

  const nowPlaying = document.querySelector("#nowPlaying");
  if (xhr.readyState == 4) {
    const response = JSON.parse(xhr.responseText);

    const nowPlayingOutput = document.querySelector("#nowPlaying");
    let nowPlayingA = response.results;
    let output = "";

    for (let i = 0; i < 15; i++) {
      output += `
                    <div id="card">
                        
                            
                            <a onclick="movieSelected('${nowPlayingA[i].id}')" href="#"><img src="http://image.tmdb.org/t/p/w400/${nowPlayingA[i].poster_path}"></a>
                            
                            <div class="cardContent">
                                <a onclick="movieSelected('${nowPlayingA[i].id}')" href="#"><h2>${nowPlayingA[i].title}</h2></a>
                                <p id="p_rating"><strong>Rating:</strong> <span>${nowPlayingA[i].vote_average} / 10 </span> </p>
                                <p><strong>Release date:</strong> <span>${nowPlayingA[i].release_date} </span></p>
                                
                            </div>
                       
                        
                    </div>`;
    }
    nowPlayingOutput.innerHTML = output;


  }
}
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Movies Database</title>
	<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<a href="#nowPlaying" id = "nowPlayingButton"  class="btn">See what's on Cinema!</a>
 <div id="nowPlaying">
             
           </div>
  
</body>
</html>

И я получил следующую ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' null в movie.js:4

...