IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Erreur "Uncaught TypeError: btns.addEventListener is not a function"


Sujet :

JavaScript

  1. #1
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut Erreur "Uncaught TypeError: btns.addEventListener is not a function"
    Bonjour,

    Je ne vois pas où est l'erreur dans (extraits):
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    	<label><input type="image" src="images/0.png" alt="btn" name="right[]"><span>Sélections et navigation</span></label><br>
    	<label><input type="image" src="images/0.png" alt="btn" name="right[]"><span>Onglet adresse</span></label><br>
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    const
    	thisForm	= document.querySelector("form")
    	,user		= thisForm.user
    	,main		= document.querySelector(".noDispl")
    	,btns		= document.querySelectorAll("input[type='image']")
    	;
    btns.addEventListener('click', function(e){
    	alert(e.target);
    }, false );

  2. #2
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 494
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 494
    Par défaut
    ton JS doit etre execute trop tot (avant que les boutons n'existent dans le DOM

    bouge ton script a la fin du body, oubien ajoute-lui un defer, oubien execute ton script dans une DOMContentLoaded
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut
    Mon script est placé en fin de code html comme ceci (en raison de l'inclusion de plusieurs fichiers)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <script type="module" src="../js/setRights.js"></script>
    			</article>			
    		</section>
     
    <footer class="footer">
    	<br/>&nbsp;
    	<hr/>
    	* N° de semaine selon ISO 8601
    </footer>
     
    <script>const clockData = {"weekDays":["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"],"monthes":["Janvier","F\u00e9vrier","Mars","Avril","Mai","Juin","Juillet","Ao\u00fbt","Septembre","Octobre","Novembre","D\u00e9cembre"],"week":"Semaine","language":"fr"};
    </script>
     
    <script type="module" src="../js/clock.js"></script>		
    	</body>
    </html>
    .
    1. J'ai essayé de le modifier comme ceci: <script type="module" src="../js/setRights.js" defer></script> ce qui ne change rien mais je ne sais pas s'il faut ajouter une valeur à l'attribut defer.
    2. Je ne sais pas comment exécuter le script dans un DOMContentLoaded.
    3. J'ai un autre écouteur dans le même script qui, lui, fonctionne.

  4. #4
    Expert confirmé
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 130
    Par défaut
    Salut

    Je ne sais pas comment exécuter le script dans un DOMContentLoaded.
    Il s'agit d'un événement.
    Un exemple ici
    :whistle:pourquoi pas, pour remercier, un :plusser: pour celui/ceux qui vous ont dépannés.
    saut de ligne
    OOOOOOOOO👉 → → Ma page perso sur DVP ← ← 👈

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 205
    Par défaut
    Bonjour,
    document.querySelectorAll("input[type='image']") renvoie une NodeList, donc plusieurs éléments, tu ne peux donc pas écrire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    btns.addEventListener('click', function(e){
      // blabla
    }
    mais
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    btns.forEach.addEventListener('click', function(e){
      // blabla
    }
    En cas de doute il est toujours bon de se reporter à la documentation disponible, exemple : Document.querySelectorAll()

  6. #6
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut
    Merci NoSmoking. C'est le libellé du message d'erreur qui m'a induit en erreur. Ce n'est pas la fonction qui n'était pas bonne, c'est son utilisation.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 25/10/2021, 17h09
  2. Réponses: 5
    Dernier message: 01/03/2019, 10h14
  3. Extjs 4.2.1 Uncaught TypeError: win.down is not a function
    Par Socrat dans le forum Ext JS / Sencha
    Réponses: 12
    Dernier message: 22/06/2015, 05h37
  4. Réponses: 4
    Dernier message: 23/05/2015, 23h01
  5. TypeError:elem.getAttribute is not a function
    Par felix01 dans le forum Odoo (ex-OpenERP)
    Réponses: 0
    Dernier message: 02/01/2014, 02h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo