Error in Movie Finder (Project 3) js code

#1

i dont get any output in Chrome,
the error is like this : Uncaught TypeError: Cannot read properties of null (reading ‘value’)
at HTMLButtonElement. (movie-finder.js:8:30)

const API_URL = "http://www.omdbapi.com/?i=tt3896198&apikey=7e6a393&t=";
const API_URL_SEARCH = "http://www.omdbapi.com/?apikey=7e6a393&i=";

var search_input = document.getElementById("search_input");
var card = document.getElementsByClassName("movie-card")[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(url);
    console.log(respData);
    showMovies(respData.Search);
}

function showMovies(movies) {
    card.innerHTML="";
    movies.forEach(async function(movie) {
        const moviesData = 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='<div class="card> <img src="$(imovie.Poster)" alt = Poster width = "300px" height = "300px"/> <br> <div class="movie-discription> <span class = "movie-title"> <b>Title</b> <span class="value">$(imovie.Title)</span></span> <span class = "movie-title"> <b>Rating</b> <span class="value">$(imovie.imdbRating)</span></span> <span class = "movie-Director"> <b>Title</b> <span class="value">$(imovie.Director)</span></span> <span class = "movie-Released Date"> <b>Title</b> <span class="value">$(imovie.Released)</span></span> <span class = "movie-Genre"> <b>Title</b> <span class="value">$(imovie.Genre)</span></span> </div> </div>';
    card.appendChild(movieElm);
}
#2

const respData = await resp.json(url);

I guess in getMovies function you are not supposed to pass url into json().
just await resp.json() would work.

#3

still not working
and its give me this error

  • Uncaught TypeError: Cannot read properties of null (reading ‘value’)
    at HTMLButtonElement.
#4

@panchalrushi2182004
Kindly share the HTML files as well so that I can run and help you out.

#5

ok
my html code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie Finder</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="full-body">
        <div class="title">Movie Finder</div>
        <div class="search-box">
            <input type="text" placeholder="Enter Movie Name" class="form-input" id="search-input">
            <button class="search">Search</button>
        </div>
    </div>
    <div class="movie-cards"></div>
</body>
<script src="movie-finder.js"></script>
</html>