0

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

J. Titus
  • 9,535
  • 1
  • 32
  • 45
  • 1
    Are you using a template language, or library like react? If not, then you cannot use template literals inside attributes like that. If you're using react consider using `href={\`./${name}.html\`}`? – evolutionxbox Jan 10 '22 at 20:25
  • Welcome to SO Tixarer. I'd suggest you take a look at these documents about updating the DOM using JavaScript so you can get a good understanding of how your JavaScript code can update the HTML document https://www.w3schools.com/js/js_htmldom_html.asp – Mike Poole Jan 10 '22 at 20:27
  • You need to add more details to your question. It is clear what you want to achieve but what is the api you are using? how is the data shaped? what libraries are you using? The approach you are trying is not possible on the client side to actually generate html files. So you would need server side logic for that. You can though, get the data in a single page and change the result based on what you get from the api. Or point the user to a page that uses js to do that. Just try to put some more info and people can help you better. – Ricardo Silva Jan 10 '22 at 20:37
  • @evolutionxbox I'm not using React or any library but only vanilla js –  Jan 10 '22 at 21:06
  • @Ricardo Silva I'm using the PokeApi with vanilla js –  Jan 10 '22 at 21:09
  • @Mike Poole I already know about that bc the main contents of my pages are html strings in js files. The problem is that I haven't found anything that can modify the name of the html file with it not being a tag. –  Jan 10 '22 at 21:12
  • Use template strings? – evolutionxbox Jan 11 '22 at 00:09
  • It sounds like you want a Single Page Application. There are several tutorials online about how to build one, even with vanilla JS. – J. Titus Jan 11 '22 at 02:04
  • Have you set up routes for your web app? If you want to make a template but just different contents, you can't make it having `.html` at the end because it will refer to a html file as default behavior of it. But you can set up routes and use `/{name}` then refer it to the Class you made in vanillajs. That one class will handle the contents placement for you. – Dhana D. Jan 11 '22 at 03:41
  • @J.Titus What's the difference (in short) with what I'm currently doing ? Will I have to modify all my code ? –  Jan 11 '22 at 15:09

1 Answers1

0

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>`;
};
Ricardo Silva
  • 1,221
  • 9
  • 19