How can I define if a product is in a basket?-CodePudding

Tell me please, how can I do it for web-site on HTML CSS Javascript. If product is not in a shopping cart, then show a text "Your cart is Empty." If the product is in the shopping cart, hide the text "Your cart is Empty.". In Html there are several buttons with class .buttons on which the user clicks and adds products to the cart. There are also added products in the shopping cart with class .basket__item. Buttons to delete items in cart with class .delete. Lastly, the text with class .text_Empty_cart. I was trying to do it through arrays and nothing happened. I tried through NodeList collections, but vainly.

function Cart_check() {
  const btns_array = [...document.querySelectorAll(".buttons")];
  const cart_Items_array = [...document.querySelectorAll(".basket__item")];
  var text_Empty_cart = document.querySelector(".text_Empty_cart");
  for (var i = 0; i < btns_array.length; i  ) {
    btns_array.addEventListener("click", () => {
      for (var j = 0; j < cart_Items_array.length; i  ) {
        if (cart_Items_array[j] > 0) {
          text_Empty_cart.style.display = "none";
        } else {
          text_Empty_cart.style.display = "block";
        }
      }
    });
  }
}
Cart_check();

Above one of my efforts. I'll be glad for any help!

CodePudding user response：

First of all, maybe you should use j .

      for (var j = 0; j < cart_Items_array.length; i  ) {

Second, it looks the script will reset the visibility. Maybe you should:

      boolean hasItem = false;
      for (var j = 0; j < cart_Items_array.length; j  ) {
        if (cart_Items_array[j] > 0) {
            hasItem = true;
            break;
        }
      }
      if(hasItem)
          text_Empty_cart.style.display = "none";
      else 
          text_Empty_cart.style.display = "block";

CodePudding user response：

You have not shared your HTML, so, for the moment we can only guess.

Below I out together a working snippet that will make the .empty__basket div disappear as soon as there are elements in the cart:

var i=0;
document.body.addEventListener("click",ev=>{
 const el=ev.target;
 if (!el.classList.contains("buttons")) return;
 
 const btxt=el.textContent;
 if(btxt=="add item"){
  cart.insertAdjacentHTML("beforeend",
  `<div >this is item ${  i} ... <button >delete</button>`);
 }
 else if (btxt=="delete"){
  el.closest("div").remove();
 }
 Cart_check();
});
const text_Empty_cart = document.querySelector(".text_Empty_cart"),
 cart=document.querySelector("#cart");

function Cart_check() {
  text_Empty_cart.style.display=document.querySelector(".basket__item")?"none":"";
}
Cart_check();

<button >add item</button>
<div id="cart"></div>
<div >Your cart is currently empty.</div>

The Cart_check() function now becomes almost trivial: It simply checks for an existence of a .basket__item element and sets the visibility of the .text_Empty_cart element accordingly.