未捕获的TypeError：无法设置未定义的属性'button.innerHTML'

问题描述

我不知道为什么会收到此错误，并且我尝试了各种可能的方法来检查错误的函数UI.removeItem（），但没有任何效果。下面是JS代码

//ALL GLOBAL Variables UP HERE

let cart = [];
let buttonDOM = [];

//CLASSES

//Product Class
class Product {
  async getProducts() {
    try {
      let result = await fetch("products.json");
      result = await result.json();
      //return result;
      let products = result.items;
      products = products.map((item) => {
        const { title,price } = item.fields;
        const { id } = item.sys;
        const image = item.fields.image.fields.file.url;
        return { title,price,id,image };
      });
      return products;
    } catch (error) {
      console.log(error);
    }
  }
}

//UI Class
class UI {
  displayProducts(products) {
    // console.log(products);
    let result = "";

    products.forEach((product) => {
      result += `
        <article class="product">
          <div class="img-container">
            <img
              src="${product.image}"
              class="product-img"
              alt="product"
            />
            <button class="bag-btn" data-id="${product.id}">
              <i class="fas fa-shopping-cart">add to cart</i>
            </button>
          </div>
          <h3>${product.title}</h3>
          <h4>$${product.price}</h4>
        </article>
      `;
    });
    productsDOM.innerHTML = result;
  }
  getBagBtns() {
    const buttons = [...document.querySelectorAll(".bag-btn")];
    buttonDOM = buttons;
    // console.log(buttonDOM);
    buttons.forEach((button) => {
      let id = button.dataset.id;
      //   console.log(id);
      let inCart = cart.find((item) => item.id === id);
      if (inCart) {
        button.innerText = "In Cart";
        button.disabled = true;
      }
      button.addEventListener("click",(event) => {
        event.target.innerText = "In Cart";
        event.target.disabled = true;

        //METHODS TO CALL
        //get product from products
        let cartItem = Storage.getProduct(id);
        cartItem = { ...Storage.getProduct(id),count: 1 };

        //add product to the cart
        cart = [...cart,cartItem];
        //save cart in the localstorage
        Storage.saveCart(cart);
        //set cart values
        this.setCartValues(cart);

        //display cart items
        this.addCartItems(cartItem);
        //show the cart
        // this.showCart();
      });
    });
  }

  //Set Cart Values
  setCartValues(cart) {
    let tempTotal = 0;
    let itemTotal = 0;
    cart.map((item) => {
      tempTotal += item.price * item.count;
      itemTotal += item.count;
    });
    cartTotal.innerText = parseFloat(tempTotal.toFixed(2));
    cartItems.innerText = itemTotal;
    // console.log(cartTotal,cartItems);
  }

  //Show Cart Items
  addCartItems(item) {
    const div = document.createElement("div");
    div.classList.add("cart-item");
    div.innerHTML = `
    <img src="${item.image}" alt="product" />
            <div>
              <h4>${item.title}</h4>
              <h5>$${item.price}</h5>
              <span class="remove-item">remove</span>
            </div>
            <div>
              <i class="fas fa-chevron-up" data-id="${item.id}"></i>
              <p class="item-amount">${item.count}</p>
              <i class="fas fa-chevron-down" data-id="${item.id}"></i>
            </div>
    `;
    cartContent.appendChild(div);
    // console.log(cartContent);
  }

  //Show Cart
  showCart() {
    cartOverlay.classList.add("transparentBcg");
    cartDOM.classList.add("showCart");
  }

我也收到错误消息：disable的属性无法设置为undefined 这是代码的其余部分

  
  clearCart() {
    let cartItems = cart.map((item) => item.id);
    cartItems.forEach((id) => this.removeItem(id));
    // console.log(cartContent.children);
    //removing from DOM
    while (cartContent.children.length > 0) {
      cartContent.removeChild(cartContent.children[0]);
    }

    this.hideCart();
  }

  removeItem(id) {
    cart = cart.filter((item) => item.id !== id);
    this.setCartValues(cart);
    Storage.saveCart(cart);
    const buttons = [...document.querySelectorAll(".bag-btn")];
    buttonDOM = buttons;

    let button = this.getSingleButton(id);
    button.disabled = false;
    button.innerHTML = `
    <i class="fas fa-shopping-cart"></i>Add to cart 
    `;
  }
  getSingleButton(id) {
    const buttons = [...document.querySelectorAll(".bag-btn")];
    buttonDOM = buttons;
    // console.log(buttonDOM);
    return buttonDOM.find((button) => parseInt(button.dataset.id) === id);
    // return buttonDOM.find((button) => button.dataset.id === id);
  }
}

问题出现在购物车逻辑范围内

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）