I am currently creating a simple website using HTML and JavaScript, but encountering a weird error. Essentially, the website has multiple html pages that display different genres of movies as recommendations. It displays the name, the billboard poster, and a quote retrieved from an open-sourced API found online.
All javascript functions for each of the movies are the same, so for example, the one for Toy Story is:
var getToyStory = function(){
var request = new XMLHttpRequest();
request.open("GET", "http://www.omdbapi.com/?apikey=8af1471b&t=Toy+Story", true);
request.onload = function(){
var data = JSON.parse(this.response);
var Plot = data.Plot;
document.getElementById("Plot").textContent=Plot;
};
request.send();
}
I know the javascript function is working because the error I encouted is in displaying it. I call the function using the follow tags:
<body onload="getToyStory()" id = 'Plot'></body>When called, the HTML displays ONLY the one API quote and nothing else, and does it without any of the styling from the external CSS styling sheet. It doesn't report any errors in the console section of the Chrome Developer Tools, so I am unsure how to fix it.
When using the "onload" element it means that it calls that function one time once the DOM is loaded. The request sends back a string read in and parsed by you to JSON. The response looks like this:
JSON Response
{
"Title": "Toy Story",
"Year": "1995",
"Rated": "G",
"Released": "22 Nov 1995",
"Runtime": "81 min",
"Genre": "Animation, Adventure, Comedy",
"Director": "John Lasseter",
"Writer": "John Lasseter, Pete Docter, Andrew Stanton",
"Actors": "Tom Hanks, Tim Allen, Don Rickles",
"Plot": "A cowboy doll is profoundly threatened and jealous when a new spaceman figure supplants him as top toy in a boy's room.",
"Language": "English",
"Country": "United States",
"Awards": "Nominated for 3 Oscars. 27 wins & 23 nominations total",
"Poster": "https://m.media-amazon.com/images/M/MV5BMDU2ZWJlMjktMTRhMy00ZTA5LWEzNDgtYmNmZTEwZTViZWJkXkEyXkFqcGdeQXVyNDQ2OTk4MzI@._V1_SX300.jpg",
"Ratings": [
{
"Source": "Internet Movie Database",
"Value": "8.3/10"
},
{
"Source": "Rotten Tomatoes",
"Value": "100%"
},
{
"Source": "Metacritic",
"Value": "95/100"
}
],
"Metascore": "95",
"imdbRating": "8.3",
"imdbVotes": "960,910",
"imdbID": "tt0114709",
"Type": "movie",
"DVD": "23 Mar 2010",
"BoxOffice": "$223,225,679",
"Production": "N/A",
"Website": "N/A",
"Response": "True"
}
You then create a variable to hold the "Plot" element from the JSON response making that a string that holds the following:
"A cowboy doll is profoundly threatened and jealous when a new spaceman figure supplants him as top toy in a boy's room."
Whenever you use the following javascript function, "document.getElementById("Plot").textContent=Plot;", all this is doing is telling the element with id "Plot" (your HTML body) to load the text from the "Plot" variable as inner text inside the element. Essentially it looks like this in HTML:
<body id="Plot">
A cowboy doll is profoundly threatened and jealous when a new spaceman figure supplants him as top toy in a boy's room.
</body>
If you want to add other HTML elements or CSS decorations to the page you would need to do that ahead of time then add the api response to the appropriate element (ie. <div id="Plot" class="awesome-css-stuff"></div>).