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
);
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); });
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.