here is my script but for now it innerHTML to the same page. I wrap my movie card in a tag, to redirect to the second page, but i'm unable to figure out how make this excute the fuunction displayMovieInfo() in the target page. i've been trying to figure it out and make researches for 3 days now, with no success. i would appreciate your help ( im learning JS )

getMovies(API_URL)

async function getMovies(url) {
    const res = await fetch(url);
    const data = await res.json();

    console.log(data);

    displayMovies(data.results);
}

function displayMovies(movies) {
    moviesWrapper.innerHTML = '';
    // movies.forEach((movie) => {
    movies.slice(-4).forEach((movie) => {
        const { title, poster_path, vote_average, overview } = movie;
        const movieElement = document.createElement('div');
        movieElement.classList.add('movie-card');

        movieElement.innerHTML = `
        <a href="film.html"><img src="${IMAGE_PATH + poster_path}" alt="${title}"/>
        <div class='movie-content'>
        
        <div class='desc'>
        <h2>${title}</h2>
        ${vote_average}
        </div>
        </div>
        </a>
        `
        moviesWrapper.appendChild(movieElement);


        movieElement.onclick = function displayMovieInfo() {


            const movieInfo = document.getElementById('about');

            // movieInfoContainer.classList.add('about');
            movieInfo.innerHTML = `
            <h2 class="about-title">${title}</h2>
            <hr>
                <div class='about-content'>
                <img class="about-img" src="${IMAGE_PATH + poster_path}" alt="${title}"/>
                <div class='description'>
                <p>${overview}<p>
                </div>
                </div>
                `
                // movieInfo.appendChild(movieSpec);

            movieInfo.scrollIntoView(true);
        };
    });
};