Javascript 事件監聽器需要點擊兩次，這樣 function 才能工作

Question

因此，當我單擊“hartje”部分時，我觸發了 function。 function 正在獲取名為“food-option”的所有課程。 如果我點擊 function 觸發器，它應該給“數據收藏”一個值。 它確實給了它一個值，但問題是我必須單擊兩次才能得到一個

 const foodOption = document.querySelectorAll(".food-option") function makeFavo() { for (var i = 0; i < foodOption.length; i++) { foodOption[i].addEventListener("click", e => { if (e.path[2].dataset.favorite == "fav") { e.path[2].dataset.favorite = "" e.path[1].children[0].style.backgroundColor = "gray" e.path[1].children[1].style.backgroundColor = "gray" e.path[1].style.backgroundColor = "gray" } else { e.path[2].dataset.favorite = "fav" e.path[1].children[0].style.backgroundColor = "red" e.path[1].children[1].style.backgroundColor = "red" e.path[1].style.backgroundColor = "red" } }) } }

 <section data-favorite="" class="food-option"> <section class="food-picture"> <figure> <img class="picture" src="./Images/vegetarisch-recept-flatbreads-met-falafel-yoghurt-muntsaus2-1585741275.jpg" alt=""> </figure> </section> <section class="food-choice"> <p>falafel</p> </section> <section class="favo-food"> <section class="hartje" onclick="makeFavo()"> <section class="hartje2"> </section> <section class="hartje3"> </section> </section> </section>

Answer 1

這是因為需要兩個事件來觸發添加數據屬性的事件監聽器。

單擊 1 您所做的就是將事件偵聽器添加到每個食物選項部分。

單擊 2，然后您將觸發您剛剛添加的添加數據屬性的事件。

只需刪除 function makeFavo 和 onclick 觸發器，然后將事件偵聽器添加到食物選項即可。

Answer 2

您的示例代碼的問題在於您將 function makeFavo()附加到 section 元素上的 onclick 事件以及在 ZC1C425268E68385D1AB5074C17A 內部具有 addEventListener 邏輯的方式。

在您的 function 中，有一個用於單擊的addEventListener ，這意味着您每次調用 function 時都在注冊一個新的單擊事件偵聽器。 這導致您看到必須單擊兩次才能看到背景顏色的變化，但在內部，如果您仔細觀察，它實際上是在執行多個已注冊的單擊事件。

您可以做的是刪除 onclick 或 addEventListener 以防止您的代碼觸發多個事件。

請參閱下面的示例。 我試圖保留你的大部分代碼：

HTML （我在這里刪除了 onclick ...... ）

<section data-favorite="" class="food-option">
<section class="food-picture">
  <figure>
    <img class="picture"
         src="./Images/vegetarisch-recept-flatbreads-met-falafel-yoghurt-muntsaus2-1585741275.jpg"
         alt="">
  </figure>
</section>
<section class="food-choice">
  <p>falafel</p>
</section>
<section class="favo-food">
  <section class="hartje">
    <section class="hartje2">
      2
    </section>
    <section class="hartje3">
      3
    </section>
  </section>
</section>

JavaScript

 // Attach the click listener when DOM is ready.
 document.addEventListener('DOMContentLoaded', (e) => {
  // updated from querySelectorAll to querySelector since there's only 1 element in your HTML for this one.
  const foodOption = document.querySelector(".food-option");
  foodOption.addEventListener("click", e => {
    if (e.path[2].dataset.favorite == "fav") {
      e.path[2].dataset.favorite = ""
      e.path[1].children[0].style.backgroundColor = "gray"
      e.path[1].children[1].style.backgroundColor = "gray"
      e.path[1].style.backgroundColor = "gray"
    } else {
      e.path[2].dataset.favorite = "fav"
      e.path[1].children[0].style.backgroundColor = "red"
      e.path[1].children[1].style.backgroundColor = "red"
      e.path[1].style.backgroundColor = "red"
    }
  });
});