从其他js文件获取html类

时间:2018-12-03 11:40:07

标签: javascript

因此,我需要从另一个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”属性

有人可以帮我吗?

1 个答案:

答案 0 :(得分:1)

addToCart是一门课程,因此您需要做.addToCart而不是#addToCart。将其更改为

document.querySelector(".addToCart");

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