0

My javascript project works like this: you type in a movie name and it pulls the info from OMDb and display that info in a new div. It works fine, but only after I click twice on my search button. I click once and it shows an empty div. Please keep answers javascript only (no JQuery as this is for a class). I'm sure it's something really simple, but I'm stumped. Code for my search button and the function that it triggers:

function createSearchContainer() {
  const container = document.createElement('div');
  container.classList.add('search-container');

  const searchInput = document.createElement('input');
  searchInput.classList.add('search-input');
  container.appendChild(searchInput);

  const searchBtn = document.createElement('button');
  searchBtn.classList.add('search-btn');
  searchBtn.textContent = 'search';
  container.appendChild(searchBtn);
  searchBtn.addEventListener('click', function() {
    searchOnClick(searchInput);
  })
  return container;
}

function searchOnClick(input) {
  ApiModule.searchByTitle(input.value);
  const container = document.querySelector('.movie-list-container');
  let title = ApiModule.getMovieTitle();
  let year = ApiModule.getMovieYear();
  let rated = ApiModule.getMovieRated();
  let plot = ApiModule.getMoviePlot();
  let count = CountModule.getItemCount();
  container.appendChild(createItemCardTest(title, year, rated, plot, count));
  CountModule.addItem();
}

My code for the div that holds the movie info:

function createItemCardTest(title, year, rated, plot, count) {
  const container = document.createElement('div');
  container.classList.add('movie-item-container');
  container.setAttribute('id', 'movie-item-container' + count)

  const image = document.createElement('img');
  image.classList.add('movie-item-poster');
  image.setAttribute('id', 'movie-item-poster' + count)
  image.src = '';
  container.appendChild(image)

  const titleDiv = document.createElement('div');
  titleDiv.classList.add('movie-item-title');
  titleDiv.setAttribute('id', 'movie-item-title' + count)
  titleDiv.textContent = title;

  const yearDiv = document.createElement('div');
  yearDiv.classList.add('movie-item-year');
  yearDiv.setAttribute('id', 'movie-item-year' + count)
  yearDiv.textContent = year;

  const plotDiv = document.createElement('div');
  plotDiv.classList.add('movie-item-plot');
  plotDiv.setAttribute('id', 'movie-item-plot' + count)
  plotDiv.textContent = plot;

  const ratingDiv = document.createElement('div');
  ratingDiv.classList.add('movie-item-rating');
  ratingDiv.setAttribute('id', 'movie-item-rating' + count)
  ratingDiv.textContent = rated;

  const rightContainer = document.createElement('div');
  rightContainer.classList.add('movie-item-right-container');

  rightContainer.appendChild(titleDiv);
  rightContainer.appendChild(yearDiv);
  rightContainer.appendChild(ratingDiv);
  rightContainer.appendChild(plotDiv);

  container.appendChild(rightContainer);
  return container;
}

export default createItemCardTest;
Barmar
  • 741,623
  • 53
  • 500
  • 612
allen1124
  • 25
  • 5
  • It looks like it should work. How are you calling `createSearchContainer()`? – Barmar Feb 24 '23 at 17:15
  • Please post a [mcve]. You can use a [Stack Snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) to make it executable. – Barmar Feb 24 '23 at 17:15
  • I crammed it all into jfiddle. Here's the working code: https://jsfiddle.net/allen1124/rsacnqw3/5/ – allen1124 Feb 24 '23 at 19:03
  • Why use a remote fiddle instead of a local stack snippet? I gave a link to the instructions. – Barmar Feb 24 '23 at 19:04
  • I can't reproduce the problem in the fiddle. The search button displays a result the first time I click. – Barmar Feb 24 '23 at 19:08
  • I tried again and now I see the issue. It runs each time, but it shows a blank result the first time. – Barmar Feb 24 '23 at 19:10
  • 1
    `ApiModule.searchByTitle()` is asynchronous. You're not waiting for the response before you show the result. So each time you do a search, you're showing the result of the previous search. – Barmar Feb 24 '23 at 19:11

0 Answers0