How do you fetch data from an API and inject that same data into a link that points to another API (JavaScript)

The movie.imdbID return a string of IDs which is then used as an argument for the getMovieIMDBID function. In my code when the element is created, it looks fine as the id looks to be properly inserted like so

a onclick=”getMovieIMDBID(tt4853102)”>Batman: The Killing Joke

yet on the console it tells me ReferenceError: tt4853102 is not defined when i click on the UI.

and if I ctrl+click the link i get this error message in a pop up window

{“Response”:”False”,”Error”:”Conversion from string “${movieID}” to type ‘Double’ is not valid.”}

let movies = movieItems.map(function (movie) {
   return `  <a onclick="getMovieIMDBID(${movie.imdbID})">${movie.Title}</a> 
                <img src="${movie.Poster}">

              `;
    });

function getMovieIMDBID(movieID) {
  let movieInfo = new XMLHttpRequest();
  movieInfo.addEventListener("load", function () {
    let movieInfoParsed = JSON.parse(this.responseText);
    let movieInfoItems = movieInfoParsed.map(function (data) {
      return `<h1>${data.Title}</h1>`;
    });
    movieInfoContainer.innerHTML = movieInfoItems;
  });
  movieInfo.open(
    "GET",
    `https://www.omdbapi.com/?i=${movieID}&apikey=564727fa`
  );
  movieInfo.send();
}