function reply_click(clicked_id) { console.log(clicked_id); var urlObj = new window.URL(window.location.href); var url = clicked_id; if (url) { var win; document.querySelector('button').onclick = function() { if (win) { win.focus(); } else { win = window.open(); win.document.body.style.margin = '0'; win.document.body.style.height = '100vh'; var iframe = win.document.createElement('iframe'); iframe.style.border = 'none'; iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.margin = '0'; iframe.src = url; win.document.body.appendChild(iframe); } document.querySelector('button').style.background = '#00000'; }; } } <div class="gameslist"> <h1>Action Games</h1> <button id="https://theadvancedsociety-tam.tbt.mx/tam-run3/" onClick="reply_click(this.id)">Run 3</button><br> <button id="https://bigfoot9999.github.io/Slope-Game/" onClick="reply_click(this.id)">Slope Game</button><br> <h1>Puzzle & Strategy Games</h1> <h1>Skill Games</h1> <h1>Retro</h1> <h1>Shooter Games</h1> <h1>Other</h1> </div>¿Cómo hago para que el segundo botón cargue el script y cargue la URL correcta cada vez que parece que el botón no funciona la primera vez que el usuario lo presiona? Además, debe haber una mejor manera de hacer esto con arreglos, y nunca he aprendido acerca de los arreglos, así que necesito ayuda.
No encontré ninguna matriz en tu ejemplo y, sinceramente, no entendí cómo quieres usarla. Pero solo para abrir el juego en una nueva ventana, aquí hay un código fijo:
let win; function openGame(url) { if (win) { win.focus(); return; } win = window.open(); win.document.body.style.margin = '0'; win.document.body.style.height = '100vh'; const iframe = win.document.createElement('iframe'); iframe.style.border = 'none'; iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.margin = '0'; iframe.src = url; win.document.body.appendChild(iframe); } <div className="gameslist"> <h1>Action Games</h1> <button onClick="openGame('https://theadvancedsociety-tam.tbt.mx/tam-run3/')">Run 3</button> <br> <button onClick="openGame('https://bigfoot9999.github.io/Slope-Game/')">Slope Game</button> <br> <h1>Puzzle & Strategy Games</h1> <h1>Skill Games</h1> <h1>Retro</h1> <h1>Shooter Games</h1> <h1>Other</h1> </div>No estoy seguro de haber entendido bien tu pregunta, pero si quieres tener un objeto donde puedas guardar el nombre y la URL del juego, puedes usar un json en lugar de una matriz, por ejemplo:
const game = { "name": "Slope Game", "url": "https://bigfoot9999.github.io/Slope-Game/" }Es más fácil acceder a la información, solo necesitas llamarlo así: game.name o game.url y te devolverá sus valores.