Javascript eventlistener 需要单击两次才能正常工作

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

因为需要两个事件来触发添加数据属性的事件监听器。
单击 1 您所做的就是将事件监听器添加到每个食物选项部分。
单击 2，然后您将触发您刚刚添加的添加数据属性的事件。
只需删除函数 makeFavo 和 onclick 触发器，然后将事件监听器添加到食物选项即可。