Added two buttons to one div via JavaScript

Question

So, I have next code.

var form = [
    {
      type: 'button',
      label: 'Reset'
    },
    {
      type: 'button',
      label: 'Submit'
    }
  ];
for (var i = 0; i < form.length; i++) {
    var obj = form[i];
    var element = document.createElement("div");
    switch (obj.type) {
        case "button":
            var wrapHtml = document.createElement("div");
            var wrapHtmlAttr = document.createAttribute("class");
            wrapHtmlAttr.value = "buttons-group";
            wrapHtml.setAttributeNode(wrapHtmlAttr);
            var button = document.createElement('button');
            var textButton = document.createTextNode(obj.label);
            button.appendChild(textButton);
            wrapHtml.appendChild(button);
            element.appendChild(wrapHtml);

            break;
    }
    var div = document.getElementById("form");
    div.appendChild(element);
  }

Please, help to add these two buttons to one div buttons-group. May be I need to use closures? I don't understand... Please, help.

Example here

make the data structure deeper, for example type :'group' that contains another array — charlietfl
– charlietfl, Commented Jan 10, 2015 at 16:22

P.Brian · Accepted Answer · 2015-01-10 16:36:59Z

1

You've created 2 div.buttons-group in loop for. To add 2 buttons into one div just put

var element = document.createElement("div");

out-side of loop. For example:

var element = document.createElement("div");
var wrapHtmlAttr = document.createAttribute("class");
wrapHtmlAttr.value = "buttons-group";
element.setAttributeNode(wrapHtmlAttr);
for (var i = 0; i < form.length; i++) {
    var obj = form[i];
    switch (obj.type) {
        case "button":         
            var button = document.createElement('button');
            var textButton = document.createTextNode(obj.label);
            button.appendChild(textButton);
            element.appendChild(button);

            break;
    }
    var div = document.getElementById("form");
    div.appendChild(element);
  }

answered Jan 10, 2015 at 16:36

P.Brian

463 bronze badges

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

Collectives™ on Stack Overflow

Added two buttons to one div via JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related