Le référentiel GITHUB que j'ai lié ne sera utilisé à aucune autre question (il ne sera pas changé sauf pour aider cette question ... elle ne sera utilisée que pour cette question note: j'ai fait mes recherches et je pense que mon code devrait fonctionner OK, donc si vous avez besoin. Le reste de mon code pour faire un bon jugement sur cela, n'hésitez pas à aller à: Mon référentiel GitHub qui va seulement être utilisé Oui, je sais que beaucoup de personnes sur ce site Web n'aiment pas quand les gens incluent des liens "github"; cependant, il est plus facile pour moi d'expliquer si je n'ai pas Tout le code assis ici faisant un gâchis (il est plus facile si je peux affiner quel code me donne une erreur OK, donc cette "pour" boucle "pour": n'est pas en cours d'exécution. Lorsque je mettais une "alerte" au-dessus de la boucle pour la boucle comme: L'alerte est appelée dès que la méthode de la boucle "pour" est appelée. J'imagine à expliquer ma question, y a-t-il quelque chose de mal avec ma boucle "pour"? (Cela fonctionne dans un autre fichier .html, donc je ne suis donc pas sûr de savoir pourquoi il ne fonctionne pas dans mon espace de travail actuel.) pour la personne qui a commenté et suggéré que j'utilise "console.log (Dropdown.length);", cela a soulevé une erreur inattendue: Comme je l'ai dit à l'origine, cette
4 Réponses :
Vous appelez p> quelque chose code> au lieu de simplement passer la fonction appelable lorsque vous essayez d'ajouter le EventListener code>. Supprimer les parenthèses.
<a class="dropdown-btn" href="#">Button 1</a>
<div style="display:none;">Dropdown Content Here</div>
<br />
<a class="dropdown-btn" href="#">Button 2</a>
<div style="display:none;">Dropdown Content Here</div>
Tandis que utile , cela ne corrigera pas le problème de l'itération fondamental - son code ne reçoit jamais à alerte ("cela ne fonctionne pas"); , donc la ligne au-dessus de celle qui ajoute la L'auditeur ne fonctionne pas non plus. (soit celui-là, ou quelque chose jette une erreur), semble probablement que rien n'existe dans la collection
Vrai, mais le problème fondamental de l'OPS ne fournit pas un exemple minimal et exécutable démontrant la question. J'ai vu ce genre de "réponse non-réponse" Aidez les autres dans le passé en démontrant que le code fonctionne et que ce sont d'autres conditions dans le système qui sont le problème.
Demandes de clarification ("Il n'y a pas assez d'informations pour dire quel est le problème réel") devrait être commentaires , pas des réponses.
@Certeperformance Si vous vérifiez le repo GitHub, vous sauriez que quelque chose existe dans la collection. La page HTML a des éléments avec la classe sélectionnée.
Les questions @MiguelCoder devraient être complètes, toutes les informations nécessaires dans la question elle-même pour cette raison (entre autres).
C'est compréhensible, mais il a mentionné l'existence de son repo. C'est tout ce que je dis.
Mise à jour de cet extrait pour inclure le contenu de la fonction "quelque chose" qui montre que lorsque vous l'appelez de cette façon, cela fonctionne comme prévu - uniquement testé en chrome.
Le problème est que vous passez une fonction en tant que paramètre sans l'envelopper dans une fonction d'appel.
Il y a deux façons de faire ce travail.
() à partir de la fonction fonction et appelez l'alerte à l'intérieur de quelque chose
xxx
- Mettez un appel de fonction unique dans votre gestionnaire d'événements et placez les deux appels de fonction à l'intérieur
xxx ici est un exemple:
Je regardais le référentiel sur Github et j'ai vu qu'il y a beaucoup d'erreurs dans votre partie HTML, de sorte que la partie JS ne puisse pas fonctionner.
À peu près cette boucle, la partie HTML actuelle est: de sorte que la fonction de chute () crée un nouvel écouteur d'événement sur le bouton, mais ne l'appelle pas.
S'il y a un second clic sur ce bouton, alors 2 actions sont ensuite lancées: le premier ajoute à nouveau un nouvel écouteur d'événement Cliquez sur le bouton,
La seconde est le déclenchement de l'écouteur d'événement a créé la première fois. P> Il y a 2 solutions possibles P> Solution 1 FORT> P> <button class="dropdown-btn" onclick="drop()">OUR STORY </button>
Non, vous avez beaucoup d'autres erreurs, d'abord l'une est d'environ => développeur .mozilla.org / fr-US / DOCS / Web / Events / DomContentLoaded
Solution 1 Ne fonctionnera pas sans réécrire la fonction ..... jsfiddle.net/3A45JKCF
Oui, c'est possible, mais cette réponse est simplement une indication de la manière de coder cela, je n'ai jamais eu l'intention de donner une solution complète car il existe de nombreuses autres erreurs ailleurs dans son code, comme je l'ai déjà mentionné ici
Voici votre problème.
Demandez-vous pourquoi obtenez-vous Si vous regardez plus loin, vous constatez que C'est parce que comme autre réponses a mentionné que vous devez modifier ceci à: p> qui assignera l'événement p> ceci.classlist code> comme non défini? p> ceci est l'objet de la fenêtre qui n'a pas de clasliste code>. Maintenant, demandez-vous pourquoi l'objet de la fenêtre? P> quelque chose () code> est un auditeur d'événement qui devrait être appelé en réponse à un événement. Dans la ligne déroulant [i] .addeventlistener ("Cliquez sur", quelque chose ()); code>, vous n'abandonnez pas quelque chose () code> comme gestionnaire d'événements, vous appelez La méthode, sans événement, il n'y a donc pas de ceci.classlist code> comme Ceci code> est l'objet de la fenêtre. p> quelque chose () code> à l'événement de clic, sans l'appeler. p>
<button class="dropdown-btn" onclick="drop()">OUR STORY
<i class="fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="#about_us">ABOUT US</a>
<a href="#community">COMMUNITY</a>
<a href="#">HUMANITARIAN ACTION</a>
</div>
Merci, après avoir traversé toutes les réponses, c'était le premier qui a fait une différence
Cet extrait de code est également faux. J'ai changé mon post précédent pour expliquer pourquoi avec un nouvel extrait de code
@Mrj, s'il vous plaît expliquer davantage comment mon extrait de code est faux.
Veuillez essayer mon code d'exemple (à la fin de mon message), ils affichent chaque appel sur les fonctions chute () et quelque chose (). Vous verrez cette fonction quelque chose () n'est pas appelé la première fois, et c'est pourquoi il a écrit: Cela ne s'appelle pas. Et après avoir répété de créer de nouveaux addEventListener à chaque clic
@Mrj, je suis en désaccord. La question initiale semblait basée sur l'hypothèse que la boucle pour n'exécuteait pas, car alerte ("veuillez travailler"); jamais exécuté. C'est une hypothèse incorrecte, comme je l'ai décrite dans cette réponse, car quelque chose () était appelé et non attribué, cela a entraîné l'erreur de ce non défini. J'ai également indiqué dans la réponse qui est inhabituelle de lier les auditeurs d'événements de cette manière. Il n'y a rien dans la question qui indique quelque chose () devrait être lié sur la charge de la page.
La question initiale était fausse car elle ne reflétait pas la réalité de son code placé sur GitHub sur lequel j'ai basé ma réponse. J'ai vu dans votre exemple de code que vous avez utilisé dans vous-même certains du code GitHub vous-même depuis que vous avez mis le onclick = "goutte ()" qui est précisément à la racine de son problème du faux ratif. Exécution de sa boucle, alors qu'il pense que le AddeventListener est l'équivalent d'un appel direct de la fonction quelque chose (). Et votre extrait de code fait la même erreur.
@MRJ "La question initiale est fausse"? Comment cela peut-il réellement être? Bien sûr, TY a un malentendu de son code et ce qui se passe, mais cela ne fait pas la question de la question. Ma réponse élabore sur la façon de déboguer le problème initial et résoudre le problème initial . Peut-être que TY veut ajouter un auditeur d'événement supplémentaire à la suite d'un clic initial, peut-être pas, nous ne savons pas. Je souligne également que le motif qu'il utilise est assez inhabituel. Mon code s'exécute sans erreur et résout le problème comme demandé et ne fait aucune hypothèse supplémentaire.
Le code affiché sur Stackoverflow et celui sur GitHub sont différents et sont soumis à des questions incompatibles. Et comme il explique que son code complet et référence pour lui est celui qui est présent sur GitHub, cela signifie que son code posté ici est faux, ce qui donne une mauvaise question.
Laissez-nous Continuez cette discussion en chat .
Veuillez poster tout le code concerné dans la question elle-même, nous avons donc un exemple de reproductible minimal à déboguer. Voir aussi Pouvons-nous obtenir le" Comment créer une page d'aide MCVE "mise à jour, afin d'indiquer qu'un lien vers un projet GitHub n'est généralement pas un MCVE acceptable?
Le
AddeventListener () Les appels doivent passer justequelque chose , pasquelque chose () .Notez également que, sauf si
quelque chose retourne une fonction, vous ne devriez pas l'appeler - il suffit de le transmettre à la place.Le
Dropdown.length est probablement 0. Peut-on voir votre mise à jour HTML: Je viens d'essayer votre code dans un extrait et ça marche. Votre problème est qu'il n'y a probablement pas un seul élément avec une classe deDropdown-BTNUne partie de la réalisation de vos recherches doit consister à mettre un
console.log (dropdown.length) juste après ce code:var dropdown = document.getelementsbyclassname ("Dropdown-BTN"); . Essayez cela et mettez à jour votre question avec cette information"Il est plus facile pour moi d'expliquer si je n'ai pas tout le code assis ici faisant un gâchis", cela peut être idéal pour vous, mais c'est plus facile pour nous nous de vous aider si le code est sur Stackoverflow en tant que exemple de reproductible minimal afin que nous n'ayons pas à sortir du site, puis sur votre Github. En outre, si vous purgeez ensuite votre référentiel pour les questions futures, ces questions deviennent seules pour quelqu'un d'autre avec un problème similaire; C'est l'un des facteurs de conduite pour Stackoverflow.
De plus, quelles erreurs trouvez-vous dans la console? Si vous n'en obtenez pas, énoncez explicitement cela.
S'il y a une erreur dans
quelque chose () , le JavaScript arrêtera également d'exécuter avant d'atteindre l'alerte.S'il vous plaît ne modifiez pas la mise à jour ou quoi que ce soit comme celui-ci au titre. Les personnes intéressées peuvent voir que vous l'avez modifiée en regardant la date à laquelle il a été modifié. En outre, l'ajout de mots en gras, en italique et que toutes les casquettes sont peu susceptibles de persuader d'autres que vos mots portent un poids.
Si
classlist.toggle est une fonction ou non dépend énormément de ce quece est dans le contexte de cette ligne de code. Si c'est un élémentou descendant, alors C'est une propriété DOM et une méthode . Sans voir comment le code est appelé, je ne pouvais pas vous dire pourquoi cela ne fonctionne pas."this.classlist.toggle (" actif); "," basculer "est indéfini. - Je ne sais pas si cette faute de frappe à cause de citations mal placées est dans votre code ou dans votre question seulement. Si vous réparez les citations et obtenez-vous encore l'erreur, essayez
console.log (this);