I need my programs to build buttons under each category and right now my code is having issues building the buttons. I also have no clue how to organize the buttons under their respective categories.

  <h1>Category 1</h1>
  <h1>Category 2</h1>
  <div ></div>
       
  <script type="text/javascript">
    //start game code
    var buttonArr = [
                    { "category":"Action","name":"Temple Run 2","url":"https://bigfoot9999.github.io/html5-games/games/templerun2/"},
                    { "category":"Action","name":"Slope Game","url":"https://bigfoot9999.github.io/Slope-Game/"}
]



buttonArr.forEach(function (arrayItem) {
    console.log(arrayItem.name);
    console.log(arrayItem.url);
    document.getElementById('buttonDiv').innerHTML  = "<button onClick='openGame(arrayItem.url)'>arrayItem.name</button>";
},);
    //end game 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);
    }
  </script>

CodePudding user response：

  <h1>Category 1</h1>
  <h1>Category 2</h1>
  <div id="buttonDiv"></div>
       
  <script type="text/javascript">
    //start game code
    var buttonArr = [
                    { "category":"Action","name":"Temple Run 2","url":"https://bigfoot9999.github.io/html5-games/games/templerun2/"},
                    { "category":"Action","name":"Slope Game","url":"https://bigfoot9999.github.io/Slope-Game/"}
]



buttonArr.forEach(function (arrayItem) {
    console.log(arrayItem.name);
    console.log(arrayItem.url);
    document.getElementById('buttonDiv').innerHTML  = `<button onClick='openGame(${arrayItem.url})'>${arrayItem.name}</button>`;
},);
    //end game 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);
    }
  </script>

You assigned class attribute to the buttonDiv, I changed it to id attribute to the buttonDiv. I also used template strings while creating buttons as template string allows us to write expressions in the following format ${variable/expression}

CodePudding user response：

  <h1>Category 1</h1>
  <h1>Category 2</h1>
  <div id="buttonDiv"></div>
       
  <script type="text/javascript">
    //start game code
    var buttonArr = [
                    { "category":"Action","name":"Temple Run 2","url":"https://bigfoot9999.github.io/html5-games/games/templerun2/"},
                    { "category":"Action","name":"Slope Game","url":"https://bigfoot9999.github.io/Slope-Game/"}
]



buttonArr.forEach(function (arrayItem) {
    console.log(arrayItem.name);
    console.log(arrayItem.url);
    document.getElementById('buttonDiv').innerHTML  = `<button onClick='openGame(${arrayItem.url})'>${arrayItem.name}</button>`;
},);
    //end game 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);
    }
  </script>

  <h1>Category 1</h1>
  <h1>Category 2</h1>
  <div id="buttonDiv"></div>
       
  <script type="text/javascript">
    //start game code
    var buttonArr = [
                    { "category":"Action","name":"Temple Run 2","url":"https://bigfoot9999.github.io/html5-games/games/templerun2/"},
                    { "category":"Action","name":"Slope Game","url":"https://bigfoot9999.github.io/Slope-Game/"}
]



buttonArr.forEach(function (arrayItem) {
    console.log(arrayItem.name);
    console.log(arrayItem.url);
    document.getElementById('buttonDiv').innerHTML  = `<button onClick='openGame(${arrayItem.url})'>${arrayItem.name}</button>`;
},);
    //end game 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);
    }
  </script>