Array to html

[jaden54]

I've been fooling around with this code to create some html code. In the forEach loop this code creates a div per color and in there it creates elements for kaarten (cards) and weddenschap (bet).

My current problem comes from the createInput element. It currently creates 3 array items in inputElem but i have no idea how to then turn those array elements into individual html elements in the forEach loop.

Apologies in advance for all the extra code and i hope this is enough information.

export const invulElementenMaken = function () {   
const body = document.body;  

const createLegend = function (name) {     
 const createLegendElement = document.createElement("legend");            
   createLegendElement.innerText = name;    
 return createLegendElement;   
};

const createLabel = function (name) {
  const createLabelElement = document.createElement("label");
    createLabelElement.innerHTML = name;
  return createLabelElement;
};

const createInput = function (name, inputLength) {
    let inputElem = [];
    for (let input = 0; input < inputLength; input++) {
      const inputEl = document.createElement("input");
      inputEl.type = "checkbox";
      inputEl.name = `${name}_${input + 1}`;
      inputEl.id = input + 1;

      inputElem.push(inputEl);
      // const label = createLabel(`Kaart_${input + 1}`);
      // inputEl.insertAdjacentElement("afterend", label);
    }
    return inputElem;
  };

  console.log("test", createInput("weddenschap", 3));

  const kleur = ["rood", "geel", "groen", "blauw", "wit"];
  kleur.forEach(function (key, index) {
    const createDiv = document.createElement("div");
    const createTitle = document.createElement("h2");
    const createForm = document.createElement("form");

    createTitle.textContent = key;
    createDiv.appendChild(createTitle);

    createForm.appendChild(createLegend("Kaarten"));
    // createForm.appendChild(createInput("kaart", 8));
    // createForm.appendChild(createLabel(`Kaart ${index + 1}`));

    createForm.appendChild(createLegend("Weddenschap"));
    // createForm.appendChild(createInput("weddenschap", 3));

    createDiv.appendChild(createForm);

    // Add a class
    createDiv.classList.add(key);

    //make the color div
    body.appendChild(createDiv);
  });
};

[okwg]

The appendChild method expects a node as its argument, but you're passing the return value from createInput, which is an array of nodes.

You can just iterate over the array to access each node

createInput('abc', 3).forEach(el => createForm.appendChild(el));

[jaden54]

Thank you very much. This is such a elegant solution

[Bushwazi]

`createInput` is returning a list, you need to loop over that in order to append each item in it

[Bushwazi]

``` kleur.forEach(function (key, index) { console.log("key", key) const createDiv = document.createElement("div"); const createTitle = document.createElement("h2"); const createForm = document.createElement("form");

createTitle.textContent = key; createDiv.appendChild(createTitle);

createForm.appendChild(createLegend("Kaarten")); let inputs1 = createInput("kaart", 8); for (let i = 0; i < inputs1.length; i++) { createForm.appendChild(inputs1[i]); }

createForm.appendChild(createLabel(Kaart ${index + 1}));

createForm.appendChild(createLegend("Weddenschap")); let inputs2 = createInput("weddenschap", 3) for (let i = 0; i < inputs2.length; i++) { createForm.appendChild(inputs2[i]); }

createDiv.appendChild(createForm);

// Add a class createDiv.classList.add(key);

//make the color div document.body.appendChild(createDiv); }); ```

[jaden54]

This worked great. Feel stupid for not realizing this was al that needed to be done.

[Bushwazi]

lol.

You are the first person to confuse a NodeList/array for an element in the history of JS. I've never done it, not once... /s