Javascript.為什么第一次點擊不起作用但第二次點擊正常？

這是一個添加到購物車的功能。所以基本上當我按下添加購物車按鈕時，它會在購物車圖示上顯示數字。但它在第一次單擊時根本不起作用，但第二次單擊運行良好。

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

我在but.onclick 中使用了console.log('hi')，但它也不會在第一次點擊時顯示'hi'。

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

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

標籤：javascript

上一篇：在JSON檔案中的坐標之間畫線

下一篇：為什么使用AzureFunctions創建應用服務計劃和存盤帳戶？