How can I modify the name of an html file when clicking on a link?

Question

I'm currently using an API which returns a lot of data and I want to be able to send the user to another page when they click on a name. Here's my Javascript:

const name = pokemon.name;
<a href="./${name}.html"> ${name} </a>

Where ${name} varies according to the name of the Pokemon.

The problem is that I want to create one HTML file with the same structure with the same Pokemon but different info. I know that it's possible because I have seen other sites with "/pokemonName" at the end of the URL in the address bar.

Edit : I'm using vanilla JS and the API is PokeApi

Answer 1

So you want something like this: https://dev.to/js_bits_bill/vanilla-js-who-s-that-pokemon-game-with-pokeapi-34m4

I see your example is exactly the same as the tutorial, the only issue is that you will notice that in the tutorial he is wrapping the html around backticks "`".

This is because those "${}" only works if wrapped in backticks.

You would need something like:

function pageHtmlString (name) {
  return `<button data-name="${name}">${name}</button>`;
};