javascript - 在按钮中显示 javascript 数组的内容

标签 javascript html css

我有以下代码。如何让数组的内容出现在按钮上?数组的内容为 0、1、2、3、4、5。我希望垂直对齐的按钮如下所示:

0
1
2
3
4
5

var family = [0, 1, 2, 3, 4, 5];
console.log(family);
for (var prop in family) {
  document.getElementById('aaron-family').innerHTML += '<div class=col> <button type="button" class="list-group-item"' + prop + '</button></div>';
  console.log(prop);
}
button {
  width: 200px;
  height: 200px;
}
<div class="container">
  <div class="row">
    <ul id="aaron-family">
      <div class="list-group"></div>
    </ul>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      j 1 of 3
    </div>
  </div>
</div>

最佳答案

现在工作正常。

您的代码运行良好,您只是忘记关闭 <button> 附加 HTML 上的标记。

var family = [0, 1, 2, 3, 4, 5];

for (var prop in family) {
  document.getElementById('aaron-family').innerHTML += '<div class=col> <button type="button" class="list-group-item">' + prop + '</button></div>';
}
button {
  width: 200px;
  height: 200px;
}
<html>

<body>
  <div class="container">
    <div class="row">
      <ul id="aaron-family">

        <div class="list-group">

        </div>
      </ul>
      <div class="col">
        1 of 3
      </div>
      <div class="col">j 1 of 3
      </div>
    </div>
  </div>
</body>

</html>

希望对您有所帮助。如果还有其他问题,请随时询问。

关于javascript - 在按钮中显示 javascript 数组的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46424177/

相关文章:

javascript - Python/Bokeh - 如何通过选择、回调和 CustomJS/js_on_change 按列值过滤行来更改数据源

html - 如何为响应式网站创建带滚动条的固定背景?

jquery - Bootstrap 轮播未加载

javascript - subscribe 方法不是用 RxJS 触发的

javascript - 使用导入将显示模块模式javascript的单个文件转换为多文件

javascript - 如何从javascript获取数据

css - Nextjs - 使用 css 模块设计嵌套元素

html - 如何将 HTML 表格宽度限制为屏幕宽度的 95%?

用于显示/隐藏的 JavaScript <c :forEach> div element of JSTL

animation - 反向旋转旋转div的子元素