Javascript eventlistener need to click twice so function will work

Question

So when I click on the "hartje" section I am triggering a function. The function is getting all classes with the name "food-option". If I click on the function trigger it is supposed to give the "data-favorite" a value. It does give it a value, but the problem is that I have to click twice so it gets one

 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

It's because two events are needed to trigger the event listener that adds the data attribute.

Click 1 all you do is add the event listener to each food option section.

Click 2 you are then triggering the event you just added which adds the data attribute.

Just remove the function makeFavo and the onclick trigger and just add event listeners to the food options.

Answer 2

The problem with your sample code is the way you have the function makeFavo() attached with onclick event on section element as well as having an addEventListener logic inside that function.

In your function, there's an addEventListener for click, which means you are registering a new click event listener every time you call that function. This results to what you're seeing about having to click twice to see the background color changing, but internally, if you take a closer look, it's really executing multiple registered click events.

What you can do is to drop either the onclick or the addEventListener to prevent your code from firing multiple events.

See my example below. I tried to keep most of your code:

HTML ( I removed the onclick here... )

<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"
    }
  });
});