Ainsi, lorsque je clique sur la section "hartje", je déclenche une fonction. La fonction obtient toutes les classes avec le nom "food-option". Si je clique sur le déclencheur de fonction, c'est ...

3
Moemen Hussein 17 mars 2021 à 02:10

2 réponses

Meilleure réponse

C'est parce que deux événements sont nécessaires pour déclencher l'écouteur d'événements qui ajoute l'attribut de données.

Cliquez sur 1 tout ce que vous faites est d'ajouter l'écouteur d'événement à chaque section d'options alimentaires.

Cliquez sur 2, vous déclenchez alors l'événement que vous venez d'ajouter qui ajoute l'attribut de données.

Supprimez simplement la fonction makeFavo et le déclencheur onclick et ajoutez simplement des écouteurs d'événements aux options alimentaires.

2
Nathan Herman 16 mars 2021 à 23:21

Le problème avec votre exemple de code est la façon dont vous avez la fonction makeFavo() attachée avec l'événement onclick sur l'élément de section ainsi que d'avoir une logique addEventListener à l'intérieur de cette fonction.

Dans votre fonction, il y a un addEventListener pour le clic, ce qui signifie que vous enregistrez un nouvel écouteur d'événement de clic chaque fois que vous appelez cette fonction. Cela se traduit par ce que vous voyez sur le fait de devoir cliquer deux fois pour voir la couleur d'arrière-plan changer, mais en interne, si vous regardez de plus près, cela exécute en réalité plusieurs événements de clic enregistrés.

Ce que vous pouvez faire est de supprimer le onclick ou le addEventListener pour empêcher votre code de déclencher plusieurs événements.

Voir mon exemple ci-dessous. J'ai essayé de conserver la majeure partie de votre code:

HTML ( J'ai supprimé le clic ici ... )

<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"
    }
  });
});
0
Dharman 16 mars 2021 à 23:46