11397 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
J'ai une question un peu bête, mais je n'arrive pas à détecter le clic d'un lien (a) en JS natif. Smiley lol Comment faut-il faire ?
J'ai essayé
document.querySelector("a").addEventListener("click",function(){})
et
document.getElementsByTagName("a").addEventListener("click",function(){})
(qui détectent que le premier lien), ainsi que
document.getElementsByTagName("a").onclick=function(){}
qui ne et
document.getElementsByTagName("a").onclick=alert()
qui se lancent au démarrage de la page.
Mais je n'ai peut-être pas bien écrit quelque chose...

Est-on obligé de faire une boucle ?

Merci de votre aide !
Modifié par js_html (13 Feb 2021 - 18:44)
Modérateur
Salut,


document.querySelector("a").addEventListener("click",function(){})

Fonctionne bien : https://jsfiddle.net/undless/yb0ufzam/

Les getElementsByXXX ont un "s" à "élément" c'est une piste Smiley cligne
Ils te renvoient une array donc tu ne peux pas mettre directement les choses comme ça. Soit tu le parcours en entier avec une boucle soit tu en prend un en particulier ex pour le premier rencontré :
document.getElementsByTagName("a")[0].addEventListener("click",function(){});


Sinon tu as le getElementById() qui ne va retourner qu'un élément (un id c'est unique et il n'y a pas de "s" Smiley lol ) https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Bonne soirée !
Merci Laurent Dufour !
Oui, j'ai bien mis le S à getElementsByTagName.
Le problème était bien que j'avais oublié que cela donnait un tableau. Donc, il faut obligatoirement une boucle !

Petite question bonus : Si l'on veut faire avec "document.querySelector", il faut faire une boucle aussi ?

Merci !
Meilleure solution
Modérateur
js_html a écrit :

Petite question bonus : Si l'on veut faire avec "document.querySelector", il faut faire une boucle aussi ?

Non , mais seul le premier élément trouvé correspondant au sélecteur sera traité.

Pour traité tous les liens, il te faut utiliser document.querySelectorAll('a') et il te faudra une boucle pour les traiter un à un.
voici un exemple simple : https://jsfiddle.net/s8vko0aw/
code de base:
for (let e of document.querySelectorAll('a')) {
  e.addEventListener('click', function() {
    // action a effectuer au click
  })
}
Donc, document.querySelectorAll("a") et document.getElementsByTagName("a"), c'est exactement la même chose ?
Modérateur
js_html a écrit :
Merci Laurent Dufour !

On se connait ?

js_html a écrit :
Oui, j'ai bien mis le S à getElementsByTagName.

Oui je sais, j'ai pas dit que tu l'avais oublié. C'est une astuce pour savoir si ca ne te renvoi qu'un élément ou plusieurs.
Modifié par _laurent (13 Feb 2021 - 22:46)
Modérateur
js_html a écrit :
Donc, document.querySelectorAll("a") et document.getElementsByTagName("a"), c'est exactement la même chose ?


non , Smiley smile https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll

autre exemple simple : https://jsfiddle.net/gh9ozjtd/
for (let e of document.querySelectorAll('nav a, p a')) {
  e.addEventListener('click', function() {
    // action a déclencher au click
  })
}


Bonne journée
Modifié par gcyrillus (14 Feb 2021 - 07:32)
_laurent a écrit :
Oui je sais, j'ai pas dit que tu l'avais oublié. C'est une astuce pour savoir si ca ne te renvoi qu'un élément ou plusieurs.
Oui, oui, je te prévenais seulement que ça n'était pas ça.

js_html a écrit :
Donc, document.querySelectorAll("a") et document.getElementsByTagName("a"), c'est exactement la même chose ?
Je me réexplique : "Je sais que querySelectorAll et getElementsByTagName sont différents, mais les deux codes suivants sont-ils les mêmes : document.querySelectorAll("a") et document.getElementsByTagName("a") ?"

En jQuery,
$("").click(function(){})
, c'est la même chose que
for (var i of document.querySelectorAll("")) {
  i.addEventListener("click", function() {
  })
}
? C'est ceci ?

Merci !
Modérateur
js_html a écrit :


Je me réexplique : "Je sais que querySelectorAll et getElementsByTagName sont différents, mais les deux codes suivants sont-ils les mêmes : document.querySelectorAll("a") et document.getElementsByTagName("a") ?"
[/code]

Merci !


Ils sont différent mais écrit tel quel , ils sélectionneront les même éléments. Lis les spécification nom de zeus, cela t'aideras à choisir la syntaxe appropriée.
js_html a écrit :

En jQuery,
$("").click(function(){})
, c'est la même chose que
for (var i of document.querySelectorAll("")) {
  i.addEventListener("click", function() {
  })
}




C'est en effet similaire au premier abord , les versions de javascript impliquées ne sont pas forcément les mêmes (oups) mais document.querySelector ne devraient causer aucun soucis avec nos derniers navigateur.

Cdt
Modifié par gcyrillus (14 Feb 2021 - 15:49)