I'm really struggling with this, I'm using fetch to get data from rest api countries, and displaying some countries in index.html. My case is that when I click on a country, I want to move to detail.html and display more data from the country I clicked on. I don't know how to deal with this. I tried to use the same script.js in detail.html and hoped to get the e.target from the addEventListener, but the code collided as a result. It would be much easier if I created a modal in index.html, but instead of doing that I want to move to a different page and get my skills increased a bit. Should I use a backend in this case?

If you'd like to see the preview site or the codes here are the links site, code

CodePudding user response：

You can store the selected Country name using local storage. For example

localStorage.setItem("Country", "Afghanistan");

and get the country name in your detail.html page like this.

var country=localStorage.getItem("Country");

Then simply send the request to API for get the data about that particular country(Afghanistan) and display it in your detail.html page.

CodePudding user response：

You can store the selected country on window object, or any global variable. Then on details page, use that country details to display.