Question regarding making multiple buttons changing what embed shows up on one same HTML page

JavaScript
1

A little backstory before we start, if that’s fine.

I’m currently in high school, and have begun noticing the large influx of unblocked game sites and proxy sites for chromebooks. I decided to make one myself, just to dip my toes in the water, but I decided instead of using Google Sites to do it, I decided to use my very limited knowledge of HTML, CSS, and JS to make it. A practice for my knowledge, if you will.

However, after making proxy pages, I wanted to add some games. However, the amount of game links I have (50+) would be too much to add all individually, with a button containing the link to another page, where the user would be playing via an embed of the site, since I do not want the user actually travelling to the site, which would theoretically cause the administration to figure out the link to the game, and eventually, blocking it.

I just want to know, is there a way to have a long list of buttons, each with a uniqueonclick or id, that when pressed, opens a tab to a singular page (same page if you click any other button), and based on the button pressed on the game hub, decides which game site embed shows up. Kind of confusing, but I hope this is possible!

2

For clarity, even if you embed the game, the browser still makes a call out to the site for the code to be embedded. If that call is blocked, the page wont load the embedded content.

It is doable, in several ways, but somewhere you’re going to need a list of the pages to be linked, and at that point you’ve… already got the links in the page, so i’m not sure how it would save you any effort?

3

Here, I’ll attempt to say it more clearly. There’s a list of buttons, which sends the user to an html page with an embed game in it (unblocked), but because I want to use embeds, I have to create a page for every game, and that’s over 50. Is there a way to assign each button a unique ID, when pressed, a javascript function reads the id, and based on that, chooses what embed shows up on the page that you get redirected to, so I only have to make the page you get redirected to. I want that page to be the same page that you would go to if you click any other button, but the only thing that changes is the embed content, which, like I previously stated, changes depending on the button pressed.

Hopefully this isn’t too confusing, and if it’s any easier, I would actually prefer to have a list of game names and a <form> where a user types the name of the game into an <input>, and the value inputted changes the content of an embed in the page the user is redirected to.

4

Assuming all of the embeddings use the same html just with a value change, sure.

(spitballing on my phone at 4AM. untested, not necessarily knowing what the embed needs, etc. May need revising.)

<form action="embedthis.html" method="GET">
<select name="chosen">
<option value="A">Game A</option>
<option value="B">Game B</option>
(...etc)
</select>
<button type="submit">Go</button>
</form>

embedthis.html

<script>
const embedurls = { "A": "http://notaurl.com", "B": "http://differenturl.net" };
const paramsObj = new URLSearchParams(window.location.search);
const choice = urlParams.get('chosen');
document.getElementById("theembed").src = embedurls[choice];
</script>