output is not coming as expected.
@veenanankani03 You will have to elaborate on your query with more information. Please share the code snippet of the issue, screenshots, etc for us to get more context so that we can pin-point the issue.
const API_URL = “http://www.omdbapi.com/?i=tt3896198&apikey=a5725835”;
const API_URL_SEARCH= “http://www.omdbapi.com/?apikey=a5725835&i=”;
var search_input= document.getElementById(“search_input”);
var card= document.getElementByClassName(“movie-cards”)[0];
document.getElementByClassName(“search”)[0].addEventListener(“click”,function(){
console.log(search_input.value);
const query=search_input.value;
if(query){
getMovies(API_URL+query);
}
});
async function getMovies(url){
const resp=await fetch(url);
const respData =await resp.json();
console.log(respData);
showMovies(respData.Search);
}
function showMovies(movie){
card.innerHTML="";
movies.forEach(async function(movie){
const movieData= await fetch(API_URL_SEARCH+movie.imdbID);
const movieDataobj= await movieData.json();
movie_display(movieDataobj);
});
}
function movie_display(imovie){
const movieElm=document.createElement(“div”);
movieElm.classList.add(“movie-card”);
movieElm.innerHTML=
Title${imovie.Title}
Rating${imovie.imdbRating}
Director${imovie.Director}
Released Date${imovie.Released}
Genre${imovie.Genre}
;
card.appendChild(movieElm);
}
}
Hi @veenanankani03
Seems like there is an error in this function where you have not mentioned the code for movieElm.innerHTML= == ? Do check this and try running the code
Hi @veenanankani03,
Please refer to this link: GitHub - Himanshu87699/Movie_Finder to find out where you are going wrong.
This is my code
const API_URL = “http://www.omdbapi.com/?i=tt3896198&apikey=a5725835&s=”;
const API_URL_SEARCH= “http://www.omdbapi.com/?&apikey=a5725835&i=”;
var search_input= document.getElementById(“search_input”);
var card= document.getElementsByClassName(“movie-cards”)[0];
document.getElementsByClassName(“search”)[0]
.addEventListener(“click”,function(){
console.log(search_input.value);
const query=search_input.value;
if(query){
getMovies(API_URL +query);
}
});
async function getMovies(url){
const resp=await fetch(url);
const respData =await resp.json();
console.log(respData);
showMovies(respData.search);
}
function showMovies(movie){
card.innerHTML="";
if(movies){
movies.forEach(async function(movie){
console.log(movie.imdbID);
const movieData= await fetch(API_URL_SEARCH+movie.imdbID);
const movieDataobj= await movieData.json();
console.log(movieDataobj);
movie_display(movieDataobj);
});
}
}
function movie_display(imovie) {
const movieElm=document.createElement(“div”);
movieElm.classList.add(“movie-card”);
movieElm.innerHTML= <div class="card"> <img src="${imovie.Poster}" alt="Poster" width="300px" height="300px"/> <br> <div class="movie-description"> <span class="movie-title"><b>Title</b><span>${imovie.Title}</span></span> <span class="movie-title"><b>Rating</b><span>${imovie.imdbRating}</span></span> <span class="movie-title"><b>Director</b><span>${imovie.Director}</span></span> <span class="movie-title"><b>Released Date</b><span>${imovie.Released}</span></span> <span class="movie-title"><b>Genre</b><span>${imovie.Genre}</span></span> </div> </div> ;
card.appendChild(movieElm);
}
Hi @veenanankani03 ,
The error says that the value associated with search_input is Null.
Try printing the search_input using the command
console.log(search_input) and see what gets printed.
If it again prints as null then search_input= document.getElementById(“search_input”); line has to be checked for correct ID