How can I generate three buttons in JavaScript?

Question

I know how to generate only one the button. I'm doing it this way:

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)

But I need to generate a few buttons(for example 3 buttons). document.body.appendChild(btn)

Use a for loop, for example: stackoverflow.com/a/13722547/1161948 — ThisClark
– ThisClark, Commented Dec 7, 2016 at 2:35
Learn the language basics, like arrays and loops; this is trivial. After you've mastered the simple stuff, then you'll have a problem when you attach onClick listeners to them that will cause the last button to activate no matter which one you press--that's a real problem, and we'll show you how to fix that when you get there. — Lee Daniel Crocker
– Lee Daniel Crocker, Commented Dec 7, 2016 at 2:35
You should use btn.setAttribute('id', 'b1') and btn.innerHTML = word — Mati
– Mati, Commented Dec 7, 2016 at 2:39
@Matías Both aren't ideal suggestions. Why use setAttribute when id is available for free? It's also not wise to insert potentially random HMTL into a button when a value is all that's required. — Carl Edwards
– Carl Edwards, Commented Dec 7, 2016 at 2:54
const input = document.createElement('input') then input.value = 'foo' will create an empty input tag because you can't set the value of a button with value — Mati
– Mati, Commented Dec 7, 2016 at 3:05

KpTheConstructor · Accepted Answer · 2016-12-07 03:07:00Z

3

Just wrap your logic in a for-loop .

Example :

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

    }

Updated with proof :

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

Hope this helps.

edited Dec 7, 2016 at 3:07

answered Dec 7, 2016 at 2:36

KpTheConstructor

3,2991 gold badge16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JosephGarrone Over a year ago

This code won't work as is, because of word being undefined.

KpTheConstructor Over a year ago

Updated to reflect

KpTheConstructor Over a year ago

in your code example you have , var mylist = ['first', 'second', 'third', 'fourth', 'fifth'] ...that should be mylist

JosephGarrone Over a year ago

I think you're getting me confused with OP. It helps to provide working code examples when the situation is as straight forward as this.

KpTheConstructor Over a year ago

Let us continue this discussion in chat.

gyre · Accepted Answer · 2016-12-07 02:39:34Z

1

Use a for-loop in conjunction with the <button> element (rather than <input type="button">).

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

answered Dec 7, 2016 at 2:39

gyre

16.8k4 gold badges40 silver badges47 bronze badges

Comments

Carl Edwards · Accepted Answer · 2016-12-07 02:44:54Z

1

Most performant solution as you're only appending the buttons to the DOM just once by using a document fragment.

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

edited Dec 7, 2016 at 2:44

answered Dec 7, 2016 at 2:39

Carl Edwards

14.6k12 gold badges69 silver badges131 bronze badges

Collectives™ on Stack Overflow

How can I generate three buttons in JavaScript?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related