Unable to load API Function on page load - Javascript

Question

I am trying to fetch information from TheMovieDB.org using API, I made a simple code to do that, but it works when I add click event to a button/hyperlink, then it displays all the NowPlayingMovies. I want the webpage should display now playing movies itself without any need to click on a button.

I tried to use the window.onload function and put the whole code in one function and remove the need to click on the hyperlink but I am unable to do it and code does not work and shows various errors. Can someone please help me fix it?

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>

And I got the following error:

Uncaught TypeError: Cannot read property 'addEventListener' of null at movie.js:4

Here's the **repl.it link ** [link](https://assignment-5-and-6--rohanjuneja.repl.co/) — Rohan Juneja, Apr 13 '19 at 01:47
why doesn't window onload work? what are "various errors" - why have you posted code that works and ask about code that fails ... post the code that fails if you want help with code that fails — Jaromanda X, Apr 13 '19 at 01:48
https://assignment-5-and-6--rohanjuneja.repl.co/js/script.js — Rohan Juneja, Apr 13 '19 at 01:56
I doubt that's the error, you've created an infinite loop - each request will now call the function that makes the request multiple times on readystatechange ... creating more requests, exponentially — Jaromanda X, Apr 13 '19 at 01:57
No the loop works fine, it prints 15 Now playing movies if i attach a function to hyperlink/button and then add onclick event and it works fine . i am unable to make it a function that works as soon as the page loads, and it should automatically add NowPlayingmovies to the div — Rohan Juneja, Apr 13 '19 at 01:59
not that loop ... onreadystatechange calls `updateLatestMovies` ... which creates another request, which calls `updateLatestMovies` ... which creates another request, which calls `updateLatestMovies` etc etc etc — Jaromanda X, Apr 13 '19 at 02:02
`xhr.addEventListener("DOMContentLoaded", updateLatestMovies);` ... xhr doesn't produce that event — Jaromanda X, Apr 13 '19 at 02:04
Remove the window.onload event, write the normal code but then when adding the JS to your html in your script add the attribute _defer_ The Js will only execute when all the domcontent has been loaded ` — Ikechukwu Eze, Apr 13 '19 at 07:31
Your key is secret you should not post it on this site if you don't want other people to know it. — Steve K, Apr 13 '19 at 17:27

Unable to load API Function on page load - Javascript

0 Answers0