Question

我知道如何只生成一个按钮。我是这样做的：

var mylist = ['first', 'second', 'third', 'fourth', 'fifth']
var rand = Math.floor(Math.random() * mylist.length)
var word = mylist[rand]

var btn = document.createElement('input')
btn.id = 'b1'
btn.value = word
btn.type = 'button'
document.body.appendChild(btn)

但我需要生成几个按钮（例如3个按钮）。 document.body.appendChild（BTN）

Answer 1

只需将您的逻辑包装在for循环中。

示例：

var mylist = ['first', 'second', 'third', 'fourth', 'fifth']
var rand = null; 
var word = null;
var threshold = 3


    for(var i = 0 ; i < threshold ; i++){

        rand = Math.floor(Math.random() * (mylist.length - 1)) + 1;
        word = mylist[rand];
        var btn = document.createElement('input');
        btn.id = 'b' + i;
        btn.value = word;
        btn.type = 'button';
        document.body.appendChild(btn);

    }

更新了证明：

http://codepen.io/theConstructor/pen/WoJEGy?editors=1010

希望这有帮助。

Answer 2

大多数高性能解决方案，因为您只需使用文档片段将按钮附加到DOM一次。

＆＃13;

const mylist = ['first', 'second', 'third', 'fourth', 'fifth']
const frag = document.createDocumentFragment();

for (let i = 0, listLen = mylist.length; i < listLen; i++) {
  let button = document.createElement('input');
  button.type = 'button'
  button.id = `b${i + 1}`;
  button.value = mylist[Math.floor(Math.random() * listLen)]

  frag.appendChild(button);
}

document.body.appendChild(frag);

＆＃13;

Answer 3

将for循环与<button>元素结合使用（而不是<input type="button">）。

＆＃13;

var list = ['first', 'second', 'third', 'fourth', 'fifth']

for (var i = 0; i < 100; i++) {
    var btn = document.createElement('button')
    var random = Math.floor(Math.random() * list.length)
    btn.textContent = list[random]
    document.body.appendChild(btn)
}

＆＃13;

如何在JavaScript中生成三个按钮？

3 个答案: