Create multiple buttons using array.protoype.forEach (javascript)-CodePudding

I am writing some code that will create multiple buttons based on the array given to the function. What I have done is that I used the array.prototype.forEach to test the function out by printing the contents of the array on the console. When that worked I tried to make some buttons but the buttons are not showing up on the page. I have tried adding document.body.appendChild(element); but all that did was give me errors. Is there a way to create multiple buttons based on an array of items using array.protoype.forEach?

This is my code:

var array = ["bill", "harry", "john", "timothy"];

array.forEach(element => 
  document.createElement(element)
//I tried adding document.body.appendChild(element); here but kept giving me errors

);

CodePudding user response：

The first parameter you pass to document.createElement is a string that specifies the type of element to be created. Another problem in your code is that while the body of your function is multiline, you are not using {}, You can achieve your goal like this:

let array = ["bill", "harry", "john", "timothy"];

array.forEach(element=> { 
  let btn = document.createElement('button');
  btn.innerHTML = element;
  document.body.appendChild(btn);
});

CodePudding user response：

When using forEach, you should pay attention to the use of {} when writing a multi-line expression. In the example below, when the page is loaded, it creates <button> elements using the data in the array array. In this solution, a <button> element is created in each forEach loop and added to the <div> element whose child element id is container.

var container = document.getElementById('container');
var array = ["bill", "harry", "john", "timothy"];
let identifier = 0;

array.forEach(element => {
    /* The new <button> element is created. */
    var button = document.createElement("button");
    
    /* The <button> element is assigned an "id". */
    button.id = element;
    
    /* A text node is added to the new <button> element. */
    var text = document.createTextNode(element);
    
    /* The text node is added to the <button>. */
    button.appendChild(text);
    
    /* The created <button> element is bound to the container as a child node. */
    container.appendChild(button);
});

button{
  display: block;
  width: 75px;
  margin-bottom: 5px;
}

/* The style created to verify that the id has been added to the created <button> element. */
#bill{
 background-color: red;
}

<div id="container">
  <!-- <button> elements are added to this field. -->
</div>