Creating Multiple Buttons - Javascript

Question

I have an array of objects in Javascript. Without using any HTML, I need to add buttons for each object in the array. I know how to make buttons in Javascript like so:

//Create the button
var button = document.createElement("button");

But I'm not sure how to add one for each object in the array. Here is my array code for my array:

var items = [
{
name: "cake",
price:"7.00",
quantity:4
},

{
name:"fries",
price:"8.00",
quantity:3
},

{
name:"brownie",
price:"5.00",
quantity:2
},

{
name:"candy",
price:"9.00",
quantity: 12
},

]

I have more objects in my array but I have only added a few to minimize question and I want 'name' to be used as the label of the button. I know I will need to use a for loop but I'm stuck on what to write in the loop. I have tried searching about this question on Google but I wasn't able to find anything that showed how to do this in Javascript I only found other languages which I have not learned yet. Also I have already this link: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

I want to use the button as a like button. Each item will have a button, when that button is clicked on, the item will be displayed in a list. For ex: the user likes cake and fries so my "list" will say cake and fries. Each button can only be clicked once. This is similar to the concept of adding items to a shopping care but I'm using it for liked items.

Could you give an example of properties you want to use for each button created? I would recomment you research Document.createElement() and how to loop through your array. — NewToJS
– NewToJS, Commented Mar 1, 2020 at 0:55
@NewToJS I have read this exact link already but I'm still stuck. Also I have updated my question to specify what I want to do for my button. — user12970394
– user12970394, Commented Mar 1, 2020 at 1:03
So the other properties other than the name are irrelevant to your current task but are shown in this example to let other know the object has more that one property? — NewToJS
– NewToJS, Commented Mar 1, 2020 at 1:07
@NewToJS Yes that is correct. I have only added them to let others know the object has more than one property. For my question I only want to display the name of item liked. — user12970394
– user12970394, Commented Mar 1, 2020 at 1:28
This is a duplicate question, but I just joined today and don't have enough reputation to mark it as duplicate, so... Stackoverflow - stackoverflow.com/questions/5886144/… :P (Works if you are comfortable with jQuery.) — shreyasm-dev
– shreyasm-dev, Commented Mar 1, 2020 at 1:28

devspeter · Accepted Answer · 2020-03-01 02:35:05Z

1

You can create a loop using the forEach() array method like:

const parentElement = document.querySelector('body'); // DOM location when buttons will be added
items.forEach(function(item) {
  const button = document.createElement("button");
  button.innerText = item.name;
  parentElement.appendChild(button); // to add new element to DOM
})

edited Mar 1, 2020 at 2:35

answered Mar 1, 2020 at 1:39

devspeter

5624 silver badges7 bronze badges

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

2 Comments

user12970394 Over a year ago

I tried this exact code and also tried changing it a bit but no buttons show up on the page.

devspeter Over a year ago

once the button is created with createElement() you have to use something like, document.querySelector('body').appendChild(button) to add it to the page. (updated answer to show method)

Collectives™ on Stack Overflow

Creating Multiple Buttons - Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related