时间戳

首页 > 解决方案 > 在 JavaScript 中创建多个按钮

javascript - 在 JavaScript 中创建多个按钮

问题描述

我检查了语法错误，看起来一切正常，只是在加载页面正文时没有做任何事情。我知道我已将脚本正确链接到 html 文件，因为我已经实现了一个 JS 时钟，它在页面中显示自己，正如您在笔中看到的那样。我的代码有什么问题吗？为什么我的 10 个按钮不显示？我担心 Bootstrap 可能会阻止我显示按钮。

我的目的是创建 10 个按钮，这样我就不必编写 10 次相同的代码。

Codepen 只是为了检查我的代码，我通常在 Atom 上工作。 这是我的 Codepen！

<div class="container-fluid" id="buttons">

</div>

function createButtons() { 
  for(i = 0; i < 11; i++) {
    var button = document.createElement("<button type=\"button\" class=\"btn btn-outline-success\">Chapter[i]</button>");
    var buttonDiv = document.getElementById("buttons");
    buttonDiv.appendChild(button);
  }
}
document.body.addEventListener("load", createButtons(), false);

标签： javascripthtmlloopsdombutton

解决方案

该函数createElement接受标签名称作为参数。

var Chapter = [0,1,2,3,4,5,6,7,8,9,10];
for(i = 0; i < 11; i++) {
    var button = document.createElement("button");
    button.innerHTML = Chapter[i];
    button.className = "btn btn-outline-success";
    var buttonDiv = document.getElementById("buttons");
    buttonDiv.appendChild(button);
  }

推荐阅读