0
votes

Besoin de cliquer deux fois pour ajouter / supprimer une classe avec JavaScript

J'ai lu certaines des réponses ici similaires à ma question, mais je ne comprends toujours pas ce qui se passe.

J'ai cet extrait JS: p>

<div class="panel controls">
      <ul>
        <li>
          <button class="btn btn-pepperonni active">Pepperonni</button>
        </li>
        <li>
          <button class="btn btn-mushrooms active">Mushrooms</button>
        </li>
        <li>
          <button class="btn btn-green-peppers active">Green peppers</button>
        </li>
        <li>
          <button class="btn btn-sauce active">White sauce</button>
        </li>
        <li>
          <button class="btn btn-crust active">Gluten-free crust</button>
        </li>
      </ul>
    </div>

javascript function dom

2 commentaires

Je ne peux pas reproduire votre problème. Pouvez-vous convertir votre code en un extrait annulable?

Désolé, voici le snippet runnable: Codepen.io/pablinx/pen/ojpavzl

3 Réponses :

0
votes

edit fort>:

Supprimez votre fonction RenderButTons et bascule la classe "Active" une fois que vous cliquez sur le bouton tel que ceci sur chaque ingrédient: P>

document.querySelector('.btn.btn-pepperonni').onclick = function() {
  state.pepperonni = !state.pepperonni;
  renderEverything()
  this.classList.toggle("active");
}

2 commentaires

Désolé, voici le snippet runnable: Codepen.io/pablinx/pen/ojpavzl

Ok j'ai trouvé le problème dans votre code. J'espère que cette solution simple aide.

0
votes

Votre JS doit être chargé à la fin de votre HTML. Votre HTML chargera le contenu de haut en bas. Donc, votre scierie veut accéder aux éléments "BTN", qui sont à l'heure actuelle non générés.

premier HTML, puis JS.

Pour une telle fonction courte, vous pouvez utiliser une fonction en ligne ci-dessous. xxx

1 commentaires

Non, désolé, le HTML est correctement écrit, mais je viens de partager ici les extraits qui comptent pour la question. Le code complet est ici: Codepen.io/pablinx/pen/ojpavzl

0
votes

Comme les réponses précédentes ont montré comment corriger votre code d'origine, j'ai essayé de trouver une version simplifiée de ce que vous voulez faire.

Dans ma solution, j'utilise une "liaison d'événement déléguée": l'événement de clic est lié au parent

  code> uniquement lorsque la cible de clic réelle est de classe  BTN  code>. Cette approche fonctionnera sur des éléments qui n'ont même pas été créés au moment de la liaison. Et il est plus "léger", car il n'y a qu'une seule liaison.  P>   p> 


<div class="panel controls">
  <ul>
    <li>
      <button class="btn btn-pepperonni active">Pepperonni</button>
    </li>
    <li>
      <button class="btn btn-mushrooms active">Mushrooms</button>
    </li>
    <li>
      <button class="btn btn-green-peppers active">Green peppers</button>
    </li>
    <li>
      <button class="btn btn-sauce active">White sauce</button>
    </li>
    <li>
      <button class="btn btn-crust active">Gluten-free crust</button>
    </li>
  </ul>
</div>

0 commentaires