Implemented JavaScript to dynamically append a pair of buttons onto a single div element

Question

Implemented JavaScript to dynamically append a pair of buttons onto a single div element

Looking for guidance on how to combine two buttons in the same div using closures.

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

Seeking advice on combining the two buttons into one div called buttons-group. Any help or suggestions are appreciated!

Check out an example here

javascript html css

Answer 1

Answer №1

In your code, you have successfully implemented the creation of 2 div.button-group elements within a loop. However, to include both buttons in one div element, it is advised to move the creation of the div outside of the loop.

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

For instance:

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 containerDiv = document.getElementById("form");
    
    containerDiv.appendChild(element);
  }

Answer 2

In your code, you have successfully implemented the creation of 2 div.button-group elements within a loop. However, to include both buttons in one div element, it is advised to move the creation of the div outside of the loop.

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

For instance:

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 containerDiv = document.getElementById("form");
    
    containerDiv.appendChild(element);
  }

Implemented JavaScript to dynamically append a pair of buttons onto a single div element

Answer №1

Similar questions

What is the best way to conceal a child element within a hidden tab using jQuery, ensuring it remains hidden until I choose to reveal it?

Storing data from an HTML table into a database using ASP.NET MVC and JQUERY/AJAX

What steps should be taken when a checkbox is unchecked?

HTML5 Audio using AudioJS may not function reliably when loaded remotely

Centering items within grid columns for optimal alignment

Tips for Drawing Lines and Preserving Them When a Condition is Met

Iterate through each checkbox within a specific classed div to check for selected options

Display a grid layout containing 5 divs in each row, ensuring that all rows begin and end in the

`Apply a distinctive color to certain text within the selected text option`

Using JQuery, retrieve all field values on click, excluding the value of the closest field in each row

Is it possible to insert uneditable text in a form field using only CSS?

Enhance the appearance of the navbar on mobile devices by customizing the styling in Bootstrap 5

Attempting to persist a nested document in MongoDB using mongoose within a Nodejs environment

Create a custom design for a Bootstrap 4 Checkbox without including a label

The loop for setState appears to only execute during the final iteration

Using jQuery to detect changes in the value of form fields, excluding any changes related to display toggles

Body overflow appears horizontal in Windows Operating System while it works fine in macOS

Participating in a scheduled Discord Voice chat session

Embrace the presence of null values on the client side

Is there a method in Express to verify which URL a post is being sent to?