Show a different contents on new page according to button pressed with JavaScript

Question

I'm creating a website with a free editor. the website is http://pozzistore.com. The editor, because I'm using a free edition, allows me to have just 5 pages, but I need more.

If you go on my website, on the homepage you will see different buttons that bring you to different pages and that is my question: instead of using 4 different pages, is there a way to use JavaScript to check which button is pressed, open a new page and show a specific content?

I mean, these are two different pages of my website:

http://pozzistore.com/P1.html

http://pozzistore.com/P2.html

to access to this pages you have to click two different buttons. I want JavaScript to check the button pressed and open a new page and for example, if I press the first button on the new page, it shows http://pozzistore.com/P1.html and if I press the second button on the same page it shows http://pozzistore.com/P2.html.

I can not use PHP because I host the website with GitHub so I don't have an Apache Server.

Answer 1

You can use the open() method.

<button onclick="openTab('myurl.com/path/to/the/first/page')">First page</button>
<button onclick="openTab('myurl.com/path/to/the/second/page')">Second page</button>
<button onclick="openTab('myurl.com/path/to/the/third/page')">Third page</button>
...

let tab=open();//that code open a new empty page at the begining, returns a `window` object (so you can use tab.alert(), tab.consloe.log() etc.)
function openTab(url) {
 tab.location.href=url; //use the window.location object
  }

Answer 2

You can get Url and access to last part of it by below way: for example if this is your url: http://pozzistore.com/P1.html

let url = window.location.href.split("/");
let page = url[url.length - 1];
if (page === "P1.html") {
  ...
} else if (...) { ... }