Open same page with different content

Question

I'm working on bookstore website. The main page has all the books. Each has it's own button. Every book has it's button linked to the same page (buy.html), I want change content by clicking on different buttons as every book has it's own description

This is my HTML button code

<button onclick="window.open('buy.html')" class="book4">Buy</button>

I need to open buy.html but with different content according to the book
but what happens now is All buttons show the same content

Can any one help me in this issue, Thanks.

Answer 1

Though your question is rather broad, I think I get your problem. You need a way to distinguish between books without creating a new page for every book. There are multiple ways of doing this. Personally I'd recommend using Server-Side scripts for this but you can also do this with JavaScript, you just have to put it in the link.

An example could be this:

<button onclick="window.open('buy.html?book=4')" class="book4">Buy</button>

What this does is open buy.html and specify what book you want to buy so you can create a function to pull only that description out of the database or however you want to do it.

I strongly recommend a database because as soon as you have a hundred or so books your page will get really slow and it's a waste of resources if you only display one.

The best way to get data out of a URL (as far as I know) is like so

Though, next time please post your code too, that would make it a lot easier to pinpoint the problem.

Good luck.

Edit: The JavaScript that I linked was not the best solution and rather complicated so I think a better and more easily understandable function can be found here