Javascript 从数组将项目呈现到DOM中，并在单击时更改每个项目的值

因此，我得到了这段代码，用于从DOM中的数组中推送所有项

如何使单击事件对每个项目起作用

编辑：

let项目={
项目1：{
费用：2200美元，
拥有：0，
类型：“项目类型”，
名称：“项目1”，
描述：“项目1描述”，
img：“img/item1.gif”
},
项目2：{
费用：4400，
拥有：0，
类型：“项目类型”，
名称：“项目2”，
描述：“第2项描述”，
img：“img/item2.gif”
},
};
for（让对象的键。键（项））{
if（items[key].owned==0）{
var el=document.createElement（'div'）；
var domString=''+项目[key]。名称+'价格：'+项目[key]。成本+''+项目[key]。描述+''；
el.innerHTML=domString；
el.addEventListener（'click'，函数（）{
项目[key].owned=1；
console.log（items[key].name+''+items[key].owned）；
});
document.getElementById（'shop'）.appendChild（el.firstChild）；
}
}

顺便说一下，我想在单击时更改一个项目变量。

---

事件侦听器在此代码中不起作用。

使用对象键分配id，然后添加事件侦听器

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
  });
}

---

多个元素不能具有相同的

id

。您可以在第一个循环本身中添加click事件。或者您可以向divs添加一个

类

，这样就不需要编写第二个循环。事件侦听器不工作。检查我更新的脚本.Change

document.getElementById（'shop'）.appendChild（el.firstChild）

to

document.getElementById（'shop'）.appendChild（el）和它将工作
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
  });
}

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);
  }
}