当前位置： 文江博客话题详情

阵列项目不在＆lt; div＆gt;中构建HTML元素

发布于 2025-02-08 22:41:18 字数 1400 浏览 1 评论 0原文

我需要我的程序来在每个类别下构建按钮，现在我的代码正遇到构建按钮的问题。我也不知道如何组织各自类别下的按钮。

  <h1>Category 1</h1>
  <h1>Category 2</h1>
  <div class="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>

原文

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 class="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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

阳光下慵懒的猫 2025-02-15 22:41:18
  <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>

您将“类属性”分配给了Buttondiv，我将其更改为id属性为buttondiv。
在创建按钮时，我还使用了模板字符串作为模板字符串允许我们以以下格式编写表达式$ {variable/expression}

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

回复 原文
一抹微笑 2025-02-15 22:41:18
  <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>

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

回复 原文
~没有更多了~

关于作者

太傻旳人生

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文