0

This is an add-to-cart function. So basically when I pressed the add cart button, it will show the number at the cart icon there. But it doesn't work at all at the first click, but the second click is functioning well.

//cart function
function cartAdd() {
  let cart = document.querySelector('.cart');
  let add = document.querySelectorAll('.add');

  for (let but of add) {

    cart.setAttribute('data-count', 0);
    but.onclick = () => {
      let item = Number(cart.getAttribute('data-count') || 0);
      cart.setAttribute('data-count', item + 1);
      cart.classList.add('on');

    }
  }
}
.cart i {
  position: relative;
  font-size: 30px;
  cursor: pointer;
  margin: 0px 10px;
  top: 18PX;
}

.cart::after {
  position: absolute;
  content: attr(data-count);
  width: 15px;
  height: 15px;
  font-size: 12px;
  border-radius: 15px;
  text-align: center;
  background-color: red;
  color: white;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
}

.cart.on::after {
  opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li class="cart"> <i class="fa fa-shopping-cart"></i></li>
<button class="add" onclick="cartAdd()">Add-cart</button>

I have used console.log('hi') inside the but.onclick but it also won't show the 'hi' for the first click.

depperm
  • 10,606
  • 4
  • 43
  • 67
kianhun4167 chai
  • 17
  • 4
  • the first click adds the listener, the second activates the listener. Instead run `cartAdd` on page load instead of on the first click of the button. (or better yet use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation#:~:text=Event%20delegation%20is%20handling%20an,on%20elements%20within%20the%20container.)) – pilchard Apr 05 '22 at 11:28
  • Put another way: `but.onclick = () => {` only runs on the first click. – freedomn-m Apr 05 '22 at 11:30

3 Answers3

2

Because you already have an event listener onclick="cartAdd()" you don't need one in the js. Remove that, the add query/loop, and the set to 0 and it should work as expected

//cart function
function cartAdd() {
  let cart = document.querySelector('.cart');
  let item = Number(cart.getAttribute('data-count') || 0);
  cart.setAttribute('data-count', item + 1);
  cart.classList.add('on');
}
.cart i {
  position: relative;
  font-size: 30px;
  cursor: pointer;
  margin: 0px 10px;
  top: 18PX;
}

.cart::after {
  position: absolute;
  content: attr(data-count);
  width: 15px;
  height: 15px;
  font-size: 12px;
  border-radius: 15px;
  text-align: center;
  background-color: red;
  color: white;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
}

.cart.on::after {
  opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li class="cart"> <i class="fa fa-shopping-cart"></i></li>
<button class="add" onclick="cartAdd()">Add-cart</button>
depperm
  • 10,606
  • 4
  • 43
  • 67
2

but it also won't show the 'hi' for the first click

But it does show for the second click, correct? Then what happens on the third click? And the fourth? How many times is it showing that message with each subsequent click?

This is because of what the code does on each click. Specifically, what does the cartAdd function do?

It adds a click event handler to the buttons.

It doesn't execute that handler, just adds it. So now the button has two click event handlers. The cartAdd function, and the handler function that was just added. So you click it again, and both of those functions are executed. One of which adds another click event handler.

And so on, and so on.

Don't add event handlers as part of the event. Just add them. Get rid of onclick="cartAdd()" entirely and just add the handler when the page loads (or when the elements exist):

let cart = document.querySelector('.cart');
let add = document.querySelectorAll('.add');

for (let but of add) {

  cart.setAttribute('data-count', 0);
  but.onclick = () => {
    let item = Number(cart.getAttribute('data-count') || 0);
    cart.setAttribute('data-count', item + 1);
    cart.classList.add('on');
  }
}
.cart i {
  position: relative;
  font-size: 30px;
  cursor: pointer;
  margin: 0px 10px;
  top: 18PX;
}

.cart::after {
  position: absolute;
  content: attr(data-count);
  width: 15px;
  height: 15px;
  font-size: 12px;
  border-radius: 15px;
  text-align: center;
  background-color: red;
  color: white;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
}

.cart.on::after {
  opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li class="cart"> <i class="fa fa-shopping-cart"></i></li>
<button class="add">Add-cart</button>
David
  • 208,112
  • 36
  • 198
  • 279
1

//cart function
function cartAdd() {
  let cart = document.querySelector('.cart');
  let add = document.querySelectorAll('.add');

  for (let but of add) {

    cart.setAttribute('data-count', 0);
    but.onclick = () => {
      let item = Number(cart.getAttribute('data-count') || 0);
      cart.setAttribute('data-count', item + 1);
      cart.classList.add('on');

    }
    but.click('trigger');
  }
}
.cart i {
  position: relative;
  font-size: 30px;
  cursor: pointer;
  margin: 0px 10px;
  top: 18PX;
}

.cart::after {
  position: absolute;
  content: attr(data-count);
  width: 15px;
  height: 15px;
  font-size: 12px;
  border-radius: 15px;
  text-align: center;
  background-color: red;
  color: white;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
}

.cart.on::after {
  opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li class="cart"> <i class="fa fa-shopping-cart"></i></li>
<button class="add" onclick="cartAdd()">Add-cart</button>

here no need to change your code just i added trigger for first click event and your code is working fine, you can also refer code from jsfiddle

Urvish Patel
  • 134
  • 15