Javascript事件监听器需要点击两次才能工作

Question

因此，当我单击“hartje”部分时，我将触发一个函数。该函数正在获取名为“food-option”的所有类。如果我单击函数触发器，它应该为“最喜欢的数据”提供一个值。它确实给了它一个值，但问题是我必须点击两次才能得到一个值

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

因为需要两个事件来触发添加data属性的事件监听器。

单击 1，您所做的就是将事件监听器添加到每个食物选项部分。

单击 2，然后您将触发刚刚添加的事件，该事件将添加数据属性。

只需删除函数 makeFavo 和 onclick 触发器，然后将事件监听器添加到食物选项即可。