Take to another page when movie is clicked

JavaScript
1

When the user search for a movie it gives them a list of movies that matches the search term So when they click on the movie I want them to be taken to another page(display div) that contains information about that movie. I want the page(div) that displays movies list to be replaced by another page(div) that contains movie information. I have tried achieve this by :

elements.searchResList.innerHTML = " ";

And then inserting the second page(div) that contains movie information:

elements.singleMovie.insertAdjacentHTML('afterbegin', markUp);

However , the first div content is removed but the second div is displayed below the it not where the first one was.

Link to my code. https://github.com/saedsq/MovieLibrary/blob/master/src/index.html

This is a movies list based on search term so when a movie is clicked.

moviesList.PNG
moviesList.PNG1594×945 574 KB

I want this page or div to be display where that is but it displays below it…

movieInfo.PNG
movieInfo.PNG1548×622 246 KB

2

I am not sure what you want exactly. If you want to display the info on the same page, it’s quite easy to do by manipulating the DOM.

If what you want is to navigate the user to another path(pathname). It could a little bit challenging. What you can do without causing a refresh:

  • Create a popstate event with new PopStateEvent(...) (a custom event with new Event () will work

  • Add an event listener to window that listens for that event (window.addEventListener…) with a handler-function that decides what to show on that path

  • On a target click, like button, do a history.pushState(…) with a new pathname.

  • Do a window.dispatchEvent(...) so that the event is triggered.

Both are easy to do once you understand which one is suitable for you

3

Yes, I would like to display the movie information on the same page. I am using vanilla js. I have tried the innerHTMLA to remove the content of one div and then used insertAdjacentHtml to attach the info page to the container but the info page is displayed below it.

4

Is there a live preview?

5

I have the live preview set up on my local machine http://localhost:8080/ but it wont work from another machine.

6

If you put it on, for example, codepen it will be easier to assist.

7

I have multiple files like more than 10 files . This is the link to my github https://github.com/saedsq/MovieLibrary/tree/master/src