Render items into DOM from array and changing value for each on click

Question

So I got this code to push all items from an array inside the DOM.

How do I make the click event work for each item?

Edit:

let items = {
  item1: {
    cost: 2200,
    owned: 0,
    type: "item type",
    name: "item1",
    desc: "item1 desc.",
    img: "img/item1.gif"
  },
  item2: {
    cost: 4400,
    owned: 0,
    type: "item type",
    name: "item2",
    desc: "item2 desc.",
    img: "img/item2.gif"
  },
};

for (let key of Object.keys(items)) {
  if (items[key].owned==0) {
    var el = document.createElement('div');
    var domString = '<div class="item"><div class="w3 h3 bg-center contain" style="background-image:url(' + items[key].img + ')"></div><span>'+ items[key].name +'</span><span>Price: '+ items[key].cost +'</span><span>'+ items[key].desc +'</span></div>';
    el.innerHTML =  domString;
    el.addEventListener('click', function() {
      items[key].owned = 1;
      console.log(items[key].name + ' ' + items[key].owned);
    });
    document.getElementById('shop').appendChild(el.firstChild);
  }
}

I want to change one item variable on click by the way. Event listener doesn't work in this code.

Multiple elements cannot have the same `id`. You could add the click event in the first loop itself. Or you can add a `class` to the divs and then https://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class — adiga, Feb 08 '19 at 18:56

Shubham Khatri · Accepted Answer · 2019-02-08T20:13:59.767

Make use of Object keys to assign the id and then add the event listener

for (let key of Object.keys(items)) {
  if (items[key].owned==0) {
    var el = document.createElement('div');
    var domString = '<div id="' + items[key] + '"><div class="w3 h3 bg-center contain" style="background-image:url(' + items[key].img + ')"></div><span>'+ items[key].name +'</span><span>Price: '+ items[key].cost +'</span><span>'+ items[key].desc +'</span></div>';
    el.innerHTML =  domString;
    document.getElementById('shop').appendChild(el.firstChild);
  }
}

for (let key of Object.keys(items)) {
  document.getElementById(items[key]).addEventListener('click', function() {
    items[key].owned = 1
  });
}

or you could simply assign the listener on the div element created using document.createElement

for (let key of Object.keys(items)) {
  if (items[key].owned==0) {
    var el = document.createElement('div');
    var domString = '<div id="' + items[key] + '"><div class="w3 h3 bg-center contain" style="background-image:url(' + items[key].img + ')"></div><span>'+ items[key].name +'</span><span>Price: '+ items[key].cost +'</span><span>'+ items[key].desc +'</span></div>';
    el.innerHTML =  domString;
    el.addEventListener('click', function() {
       items[key].owned = 1
    });
    document.getElementById('shop').appendChild(el);
  }
}

Change `document.getElementById('shop').appendChild(el.firstChild);` to `document.getElementById('shop').appendChild(el);` and it will work — Shubham Khatri, Feb 08 '19 at 20:11

Render items into DOM from array and changing value for each on click

1 Answers1

Linked