11528 sujets

JavaScript, DOM et API Web HTML5

Détecter un clic sur une id

Bonjour,
J'aurais aimé savoir quel est le moyen à privilégier en JS natif pour détecter un clic sur une id.

var monId=document.getElementById("monId)
monId.addEventListener("click", function(){/**/});

ou
document.getElementById("monId").onclick=function(){/**/}

ou autre...

Merci !
Modérateur
Et l'eau,

Les deux sont justes. Cependant, le premier (addEventListener) est à privilégier tout de même.
Merci, donc j'utiliserai 

document.getElementById("monId).addEventListener("click", function(){
/*Le Code*/
});
Re-bonjour,
Y a-t-il un moyen de faire comme

$("#monId").click(function(){
/*Le Code*/
})
en JS natif ?

Car, en faisant

document.getElementById("monId").addEventListener("click", function(){
/*Le Code*/
});
, ça entraine une erreur si "monId" n'existe pas au début, contrairement au premier script.
J'ai besoin de ça, car un objet est créé en JS et n'existe pas au début, mais est cliquable après sa création.

Merci !
Modifié par js_html (31 Dec 2020 - 11:20)
Modérateur
Voici une astuce, mais il y a surement quelque chose de plus simple. (programmation = pas mon truc)

let clickable = document.querySelectorAll("#monId");

for (i = 0; i < clickable.length; i++) {
  clickable.addEventListener("click", function () {
    /*Le Code*/
  });
}


L'idée est de rechercher tout tes id avec le nom monId (en principe il ne doit pas en trouver plus d'un ! ), ensuite tu boucle sur le nombre de résultats.
1 tour (0) si l'Id existe et la boucle s'opére,
0 tour (null) si il n'y en pas , et la boucle ne démarre pas, donc aucune tentative d'attribuer un onclick sur un élement inéxistant.

Cdt
Modifié par gcyrillus (30 Dec 2020 - 13:55)
Modérateur
Salut les gars, pourquoi pas un simple `if != null` ? Smiley rolleyes
Encore mieux, si tu as un id qui n'est pas présent au début, ça veut probablement dire que tu charges du contenu plus tard. Pourquoi ne pas charger le JS associé plus tard aussi ? Smiley smile
Modérateur
Bonjour,

Avec :
$("#monId").click(function(){
/*Le Code*/
})

jquery va effectuer son action en bouclant sur la liste d'éléments correspondant au sélecteur #monId. Celle liste sera vide avant que l'élément ayant pour id #monId existe, et sera une liste d'un seul élément après que l'élément ayant pour id #monId sera créé.

Avec :
document.getElementById("monId).addEventListener("click", function(){
/*Le Code*/
});

ça fera une erreur js si l'élément n'a pas encore été créé parce que document.getElementById("monId) renverra null.

Pour avoir un code équivalent à celui de jquery, il faudrait faire un truc du genre :
var list=document.querySelectorAll("#monId");
list.forEach(e => e.addEventListener("click", function(){
/*Le Code*/
}));


Evidemment, ici, comme le sélecteur #monId conduit à une liste de au plus 1 élément, on aurait pu se contenter de faire :
var e=document.querySelector("#monId");
if(e) e.addEventListener("click", function(){
/*Le Code*/
});


Et le code suivant ne ferait pas d'erreur lui aussi :
var e=document.getElementById("monId");
if(e) e.addEventListener("click", function(){
/*Le Code*/
});


Mais dans tous les cas, que ce soit avec jquery, ou en js pur, si tu déclenches le code avant que l'élément ayant pour id #monId soit créé, même si le code ne plante pas (ils feront une boucle sur 0 élément, y compris jquery de manière cachée, ou bien ne feront une action que si le test d'existence de l'élément est passé avec succès), ton élément n'aura jamais de fonction déclenchée lors d'un clic.

Pour que le clic fasse quelque chose, il faut n'exécuter l'un des codes précédents qu'après la création de l'élément dans la page, en l'encapsulant par exemple dans un window.addEventListener("load,...)" :
window.addEventListener("load",function(){
	var list=document.querySelectorAll("#monId");
	list.forEach(e => e.addEventListener("click", function(){
		//Le Code
	}));
});

ou bien
window.addEventListener("load",function(){
	// pas besoin de tester l'existence de l'élément dans ce cas
	document.getElementById("monId").addEventListener("click", function(){
		/*Le Code*/
	});
});


Ce code peut être placé n'importe où (y compris dans la partie <head> de la page).

Amicalement,
Modifié par parsimonhi (30 Dec 2020 - 15:26)
Modérateur
js_html a écrit :
..... car un objet est créé en JS et n'existe pas au début, mais est cliquable après sa création.


sinon ajouter l'evenement onclick à partir du script qui le crée.

exemple 
let monDiv = document.createElement('div');
monDiv.setAttribute('id','monId');
monDiv.textContent="Hello world !"// ou autres méthodes et autre contenus
monDiv.addEventListener("click", function () {
    this.style.color="green"// pour voir
   // ou une gestion de class ou appel a une autre fonction ,ou  ....
  });
monDiv.style.cursor="pointer";// si pas déjà dans les styles.
document.body.appendChild(monDiv)// maintenant on peut l'ajouter et clicquer dessus
Sujet clos
Aller à