Question

您好，我正在尝试制作一个网页，点击图片会将其添加到购物车中，但我的事件侦听器似乎无法正常运行，目前它仅在页面加载时执行，但在进一步单击图片时执行什么也没有发生。我不希望它在页面加载时执行该功能，只有在加载后单击图像时，我相信它们是调用 quarySelectorAll 并遍历每个被咳嗽的元素的问题。代码如下。

 // start functions
function add_to_cart(item) {
  console.log(item.className);
}
// end functions

//creating list to modify such that our original list does not get affect
let remove_list = list_of_books;

let books_shown = [];
let cart = [];

// loop through 6 times
for (let i = 0; i < 6; i++) {
  //find a random index in remove_list
  let book_index = Math.floor(Math.random() * remove_list.length);
  // take indexed location and place object inside of book
  let book = remove_list[book_index];
  // push book to back of card list
  books_shown.push(book);
  // remove pushed book from remove_list
  remove_list.splice(book_index, 1);
  // create tr element called row
  const row = document.createElement("tr");
  // create html element called column and place inside that column values from the book object
  const column = `
        <th>${book.name}</th>
        <th>${book.price}</th>
        <th><img class="${book.id}" src="./images/${book.image}.png" <p>${book.description}</p></th> `;
  // insert into inner most element (currently empty) of row the value of column
  row.innerHTML = column;

  // select from document main-table class and append to it current value of row
  document.querySelector(".main-table").append(row);
}

let images = document.querySelectorAll("img");
images.forEach((image) => {
  image.addEventListener("click", add_to_cart(image));
});

javascript事件侦听器功能未运行

0 个答案: