CODEWITHSUNDEEP
javascript
kianhun4167 chai
kianhun4167 chai

Reputation: 17

Javascript.Why the fist click is not functioning but the second click is function normally?

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.

Upvotes: 0

Views: 92

Answers (3)

Urvish Patel
Urvish Patel

Reputation: 144

//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

Upvotes: 1

depperm
depperm

Reputation: 10746

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>

Upvotes: 2

David
David

Reputation: 218828

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>

Upvotes: 2

Related Questions