Question

在创建该shop-container类之后，如何选择它并向其添加innerHTML。现在，它给我一个错误TypeError：无法读取null的属性“ innerHTML”。

我想做的是在发现某种类型的产品自动添加到其细分中时使此代码正常工作（例如，衬衫类型在其细分中仅包含衬衫）

const shop = document.querySelector(".shop");
const shopContainer = document.querySelector(".shop-container");

class Shop {
  constructor() {
    this.getItems();
  }
  async getItems() {
    let result = await fetch("../products.json");
    let data = await result.json();
    View.renderItems(data);
  }
}

class View {
  static renderItems(result) {
    result.forEach(item => {
      View.oneItem(item);
    });
  }
  static typeContainer(type) {
    if (shop.innerHTML.indexOf(`${type}`) === -1) {
      let temp = `         
            <div class="${type}">
              <h1>${type}</h1>
              <div class="shop-container">

              </div>
            </div>
        `;
      shop.innerHTML += temp;
      console.log("succ");
    }
  }
  static oneItem(item) {
    let temp = `<article class="shop-item">
          <div class="item-img">
            <img src="img/shop/${item.id}.png" alt="" />
          </div>
          <div class="item-info">
            <h1>${item.name}</h1>
            <h3>${item.style}</h3>
            <hr />
            <div class="item-cart">
              <h3>${item.price}<small>rsd</small></h3>
              <button class="order-btn" data-id="${item.id}"><i class="fas fa-cart-plus fa-2x"></i></button>
            </div>
          </div>
        </article>`;
    View.typeContainer(item.type);
    shopContainer.innerHTML += temp;
  }
}

Answer 1

element.className

检查以下内容：https://www.javascripttutorial.net/javascript-dom/javascript-classname/#:~:text=To%20get%20a%20complete%20list,used%20instead%20of%20the%20class%20。

创建某些div类后如何访问

1 个答案: