如何為購物車更改數量 function？

Question

這是我的應用程序https://connorlewis128.github.io/ShoppingPage/Dist/product.html的鏈接

當您在將東西添加到購物車后單擊右上角的購物車時，您將被帶到該購物車頁面這是我目前對數量更改 function 的嘗試，但我非常卡住

// quantity change
function quantityChange() {
  if (document.querySelector("btn-plus")) {
    products.inCart = products.inCart + 1;
  } else if (document.querySelector("btn-minus")) {
    products.inCart = products.inCart - 1;
  }
}

讓我知道是否需要更多信息或代碼

Answer 1

我認為問題出在你的代碼中，你有document.getElementsByClassName('.btn-plus') ，所以對於getElementsByClassName你不需要“。”，但在querySelector中你需要。

至於使用事件偵聽器更新數量，您需要執行以下操作：

1. 我在包含product.inCart的span中添加了一個“數量”的id屬性。 這很重要，因此我們可以獲得對此span元素的引用，以便我們可以更新它的innerText屬性。
2. 我像這樣添加了代碼並驗證它在我的機器上工作：

但是，您要在此處添加的代碼會有所不同，因為通過 Chrome DevTools 我無法訪問您的產品 object。 你會想要這樣的東西

document.querySelector('.btn-plus').addEventListener('click', () => {
    const quantityText = document.querySelector('#quantity');
    quantityText.innerText = `${products.inCart++}`;
});

Answer 2

你可以這樣做，

第 1 步：將displayCart function 更改為：

function displayCart() {
  let cartItems = localStorage.getItem("productsInCart");
  cartItems = JSON.parse(cartItems);
  console.log(cartItems);
  let cartContainer = document.querySelector(".products");
  let cartCost = localStorage.getItem("totalCost");

  if (cartItems && cartContainer) {
    cartContainer.innerHTML = "";
    Object.values(cartItems).map((products) => {
      cartContainer.innerHTML += `
      <div class="products">
        <span>${products.name}</span>
        <img src="${products.Tag}" />
        <i class="btn-remove fas fa-times-circle"></i>
        <div class="productPrice">$${products.price}</div>
        <div class="productQuantity">
          <span class="btn-minus"><i class="fas fa-arrow-alt-circle-left"></i></span>
          <span class="curItems">${products.inCart}</span>
          <span class="btn-plus"><i class="fas fa-arrow-alt-circle-right"></i></span>
        </div>
        <div class="Total">$${products.price * products.inCart}</div>
      </div>
      `;
    });

    cartContainer.innerHTML += `
      <section class="basketTotalContainer">
      <h4 class="basketTotalTitle">
          Basket Total:
      </h4>
      <h4 class="BasketTotal">
          $${cartCost}.00
      </h4>
      </section>`;
  }
}

---

第二步：將quantityChange function改為：

function quantityChange() {
  const plusBtnNew = document.querySelector(".btn-plus");
  const minusBtnNew = document.querySelector(".btn-minus");
  const curItems = document.querySelector(".curItems");

  plusBtnNew.addEventListener("click", () => {
    const total = Number(localStorage.getItem("cartNumbers"));
    localStorage.setItem("cartNumbers", total + 1);
    curItems.textContent = total + 1;
  });

  minusBtnNew.addEventListener("click", () => {
    const total = Number(localStorage.getItem("cartNumbers"));
    localStorage.setItem("cartNumbers", total - 1);
    curItems.textContent = total - 1;
  });
}

---

最終store.js代碼：

const sizeBtn = document.querySelector(".btn-group1");

const showcase = document.querySelector(".showcase");

let carts = document.querySelectorAll("#add-to-cart");
let favorites = document.querySelectorAll("#favorite");
console.log(favorites);
let products = [
  {
    name: "ZIPPERED HOODED SWEATSHIRT",
    Tag:
      "https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/black%20jacket/front.webp",
    price: 50.0,
    inCart: 0,
  },
];

// add to cart
for (let i = 0; i < carts.length; i++) {
  carts[i].addEventListener("click", () => {
    cartNumbers(products[i]);
    totalCost(products[i]);
  });
}

function onLoadCartNumbers() {
  let productNumbers = localStorage.getItem("cartNumbers");

  if (productNumbers) {
    document.querySelector("span .navbarCart").textContent = productNumbers;
  }
}

// Number of items added to cart
function cartNumbers(products) {
  let productNumbers = localStorage.getItem("cartNumbers");
  productNumbers = parseInt(productNumbers);
  if (productNumbers) {
    localStorage.setItem("cartNumbers", productNumbers + 1);
    document.querySelector("span .navbarCart").textContent = productNumbers + 1;
  } else {
    localStorage.setItem("cartNumbers", 1);
    document.querySelector("span .navbarCart").textContent = 1;
  }

  setItems(products);
}
// favorites
for (let i = 0; i < favorites.length; i++) {
  favorites[i].addEventListener("click", () => {
    favItems(products[i]);
    totalCost(products[i]);
  });
}

function onLoadfavNumbers() {
  let favNumbers = localStorage.getItem("favItems");

  if (favNumbers) {
    document.querySelector("span .favoritesCount").textContent = favNumbers;
  }
}

// number of favorites added
function favItems(products) {
  let favNumbers = localStorage.getItem("favItems");
  favNumbers = parseInt(favNumbers);
  if (favNumbers) {
    localStorage.setItem("favItems", favNumbers + 1);
    console.log(favNumbers);
    document.querySelector("span .favoritesCount").textContent = favNumbers + 1;
  } else {
    localStorage.setItem("favItems", 1);
    document.querySelector("span .favoritesCount").textContent = 1;
  }

  setItems(products);
}

function setItems(products) {
  let cartItems = localStorage.getItem("productsInCart");
  cartItems = JSON.parse(cartItems);

  if (cartItems != null) {
    if (cartItems[products.Tag] == undefined) {
      cartItems = {
        ...cartItems,
        [products.Tag]: products,
      };
    }
    cartItems[products.Tag].inCart += 1;
  } else {
    products.inCart = 1;
    cartItems = {
      [products.Tag]: products,
    };
  }
  localStorage.setItem("productsInCart", JSON.stringify(cartItems));
}
function totalCost(products) {
  let cartCost = localStorage.getItem("totalCost");
  if (cartCost != null) {
    cartCost = parseFloat(cartCost);
    localStorage.setItem("totalCost", cartCost + products.price);
  } else {
    localStorage.setItem("totalCost", products.price);
  }
}

// display cart
function displayCart() {
  let cartItems = localStorage.getItem("productsInCart");
  cartItems = JSON.parse(cartItems);
  console.log(cartItems);
  let cartContainer = document.querySelector(".products");
  let cartCost = localStorage.getItem("totalCost");

  if (cartItems && cartContainer) {
    cartContainer.innerHTML = "";
    Object.values(cartItems).map((products) => {
      cartContainer.innerHTML += `
      <div class="products">
        <span>${products.name}</span>
        <img src="${products.Tag}" />
        <i class="btn-remove fas fa-times-circle"></i>
        <div class="productPrice">$${products.price}</div>
        <div class="productQuantity">
          <span class="btn-minus"><i class="fas fa-arrow-alt-circle-left"></i></span>
          <span class="curItems">${products.inCart}</span>
          <span class="btn-plus"><i class="fas fa-arrow-alt-circle-right"></i></span>
        </div>
        <div class="Total">$${products.price * products.inCart}</div>
      </div>
      `;
    });

    cartContainer.innerHTML += `
      <section class="basketTotalContainer">
      <h4 class="basketTotalTitle">
          Basket Total:
      </h4>
      <h4 class="BasketTotal">
          $${cartCost}.00
      </h4>
      </section>`;
  }
}

function removeItem() {
  let removeItem = document.getElementsByClassName("btn-remove");
  console.log(removeItem);
  for (let i = 0; i < removeItem.length; i++) {
    let button = removeItem[i];
    button.addEventListener("click", function (event) {
      console.log("clicked");
      let removeItem = event.target;
      removeItem.parentElement.remove();
    });
  }
}

// color change

function colorChange() {
  showcase.style.animation =
    document.querySelector('input[name="colorradio"]:checked').value +
    " 6s infinite";
}

// quantity change
function quantityChange() {
  const plusBtnNew = document.querySelector(".btn-plus");
  const minusBtnNew = document.querySelector(".btn-minus");
  const curItems = document.querySelector(".curItems");

  plusBtnNew.addEventListener("click", () => {
    const total = Number(localStorage.getItem("cartNumbers"));
    localStorage.setItem("cartNumbers", total + 1);
    curItems.textContent = total + 1;
  });

  minusBtnNew.addEventListener("click", () => {
    const total = Number(localStorage.getItem("cartNumbers"));
    localStorage.setItem("cartNumbers", total - 1);
    curItems.textContent = total - 1;
  });
}

onLoadCartNumbers();
onLoadfavNumbers();
displayCart();
removeItem();

quantityChange();