从其他 js 文件中获取 html 类答案

【问题标题】：Get html class from other js file从其他 js 文件中获取 html 类
【发布时间】：2018-12-03 11:40:07
【问题描述】：

所以我需要从另一个 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(...) 为空；无法访问其“addEventListener”属性

有人可以帮我解决这个问题吗？

【问题讨论】：

首先它需要是.addToCart，因为“addtoCart”是一个class，而不是一个id。

标签： javascript

【解决方案1】：

addToCart 是一个类，所以你需要使用.addToCart 而不是#addToCart。改成

document.querySelector(".addToCart");

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

【讨论】：