Movie Finder Project not working for me

Hi,
I think some error is occurred on the javascript file, I suspect line no:13 and from line no:31 to 48 something happened but couldn’t figure out.

const API_URL = "http://www.omdbapi.com/?i=tt3896198&apikey=4e611c61&s=";
const API_URL_SEARCH = "http://www.omdbapi.com/?apikey=4e611c61&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(movies){
    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(movie){
    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 class="value">${imovie.Title}</span></span>
                <span class="movie-title"><b>Title</b><span class="value">${imovie.imdbRating}</span></span>
                <span class="movie-title"><b>Title</b><span class="value">${imovie.Director}</span></span>
                <span class="movie-title"><b>Title</b><span class="value">${imovie.Released}</span></span>
                <span class="movie-title"><b>Title</b><span class="value">${imovie.Genre}</span></span>
            </div>
        </div>
    ;
    card.appendChild(movieElm);
}

Please help.

Hi @sujitth ,
You have taken movie as the parameter for the function, but you are using imovie in the code inside

function movie_display(imovie) /*instead of function movie_display(movie) 
would be correct code*/

Thanks for pointing out that mistake and corrected it, but still getting the same error.

Please find the screenshot:

@sujitth Multi line strings must be enclosed in backticks(``)

movieElm.innerHTML=
//added backticks(``)
        `<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 class="value">${imovie.Title}</span></span>
                <span class="movie-title"><b>Title</b><span class="value">${imovie.imdbRating}</span></span>
                <span class="movie-title"><b>Title</b><span class="value">${imovie.Director}</span></span>
                <span class="movie-title"><b>Title</b><span class="value">${imovie.Released}</span></span>
                <span class="movie-title"><b>Title</b><span class="value">${imovie.Genre}</span></span>
            </div>
        </div>`
    ;