HTML元素上的Javascript onclick事件

Question

我已经获得了使我可以搜索产品列表，然后生成与搜索词匹配的HTML列表的代码。我的下一步是能够单击产品的随附图片或其名称，然后将其添加到购物车部分。我知道onclick事件将有助于完成此操作，但不确定实现情况。任何指导将不胜感激！

另外：我尝试了代码

HTML

<img class="imgInteract">

JS

var imgInteract = document.getElementsByClassName('img')

尝试并能够选择列表中生成的img元素，但似乎不起作用。

HTML

<form>
  <p>Please insert the items</p>
  <input type="text" id="box" />
</form>

<div id="root"></div>

<h3>
shopping cart
</h3>

CSS

  img {
    height: 100px;
  }
  li {
    display: inline-block;
  }

JS

const catalog = {

  GalaxyTablet: {
    name: "GalaxyTablet",
    key: "galaxytablet",
    keywords: ["galaxy", "tablet", "samsung"],
    price: 800,
    image: "https://www.jbhifi.co.nz/FileLibrary/ProductResources/Images/150044-M-HI.jpg"
  },
  GalaxyPhone: {
    name: "GalaxyPhone",
    key: "galaxyphone",
    keywords: ["galaxy", "phone", "samsung"],
    price: 1000,
    image: "https://assets.kogan.com/files/product/etail/Samsung-/S10WHT_03.jpg?auto=webp&canvas=753%2C502&fit=bounds&height=502&quality=75&width=753"
  },
  HTCPhone: {
    name: "HTCPhone",
    key: "htcphone",
    keywords: ["htc", "phone"],
    price: 650,
    image: "https://cdn.mos.cms.futurecdn.net/ca063713e185be46e62ec2eb3762a540.jpg"
},

};

const form = document.querySelector("form");

form.addEventListener("submit", submitHandler);

function submitHandler(event) {
  event.preventDefault();

  const searchTerm = form.box.value;
  const results = search(searchTerm);

  render(results);
}

function search(searchTerm) {
  return Object.keys(catalog)
    .filter((key) => catalog[key].keywords.includes(searchTerm.toLowerCase()))
    .map((key) => catalog[key]);
}

function render(results) {
  const root = document.querySelector("#root");
  const list = results.map(itemToLi).join("");

  root.innerHTML = `<ul>
    ${list}
  </ul>`;
}

function itemToLi(item) {
  return `<li>${item.name}</li>$ ${item.price}<li> <li><img src="${item.image}"></li>`;
}

Answer 1

function itemToLi(item) {
  return `<li>${item.name}</li>$ ${item.price}<li> <li><img  class="imgInteract" src="${item.image}"></li>`;
}

root.addEventListener('click',(e)=>{
    if(e.target.className=='imgInteract')
     console.log('add to shopping cart')
})