javascript - 从其他js文件获取html类

所以我需要从另一个JavaScript文件进入addToCart类。
但是addToCart不在html中，而是在javascript中：

function loadMeals() {
  let i = 0;
  let id = 1;
  let fillMealList = document.querySelector("#fillMealList");
  for (let i = 0; i < meals.length; i++) {
    let item = meals.find(item => item.id === id);
    fillMealList.innerHTML +=
      "<article>" +
      "<h3>" + item.title + "</h3>" +
      "<figure>" +
      "<img src='images/" + item.img + "'" + ">" +
      "<figcaption>" +
      "Meal by: " + "<span>" + item.cook + "</span>" +
      "</figcaption>" +
      "</figure>" +
      "<div class='info'>" +
      "<p>€ <span>" + item.price + "</span>" + "/pp" + "</p>" +
      "<a href='#' class='addToCart'>Order</a>" +
      "</div>" +
      "</article>";
    id++;
  }
}

现在，我需要单击类addToCart的“订单”。
所以我做了：

document.querySelector("#addToCart").addEventListener("click", addOrder);

现在我得到了错误：


  TypeError：document.querySelector（...）为null;无法访问其“ addEventListener”属性


有人可以帮我弄这个吗？

最佳答案

addToCart是一个类，因此您需要执行.addToCart而不是#addToCart。更改为

document.querySelector(".addToCart");

请注意，如果该类中只有一个元素，则addEventListener将适用于您的情况。否则，您需要使用querySelectorAll()并将addEventListener()函数附加到每个元素。

关于javascript - 从其他js文件获取html类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53593094/