How do I make an Array for my script with 2 different labels so I can id the game name and url to lo-CodePudding

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 >
  <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>

How do I get the 2nd button to load the script and load the correct URL every time, it seems like the button does not work the first time the user presses it? Also, there must be a better way to do this with arrays, and I've never learned about arrays so I need help.

CodePudding user response：

I didn't find any array in your example, and honestly didn't get the idea how you want to use it. But just to open game in new window - here is a fixed code:

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>

CodePudding user response：

I'm not sure if I understood right your question but if you want to have an object where you can save the games name and url you can use a json instead of an array, for example:

const game = {
"name": "Slope Game",
"url": "https://bigfoot9999.github.io/Slope-Game/"
}

Its easier to access the information, you just need to call it like this: game.name or game.url and it will return its values.