11487 sujets

JavaScript, DOM et API Web HTML5

[résolu] Comment récupérer l'id d'un élément cliqué ?

Pages :
Re bonjour (normal c'est un nouveau post)

Je souhaite récupérer l'id d'un élément que l'on clique. L'on m'a indiqué ceci pour un autre besoin, mais je pense que la solution est semblable dans un sens inverse :

on remplace :
<tag id="xxxx" onclick="...">
par
document.getElementById('xxxx').onclick = function () { ... };

mais cela c'est pour lancer une fonction suite au clique de l'élément dont l'id est passé en paramètre. MOi je veux que le clique me permettre de récupérer l'id puis ensuite de lancer la fonction en fonction de cet id.

Merci de votre aide.
Modifié par sylvainbucule (21 Aug 2007 - 23:37)
Salut,
pour récupérer l'élément qui a engendré un événement :

document.getElementById('xxx').onclick = function() {
// element
var elt = this;
// id de l'element
var idElt = this.getAttribute('id');
};


C'est ce que j'ai compris dans ta question, mais je suis pas sûr de l'avoir bien comprise !
Modifié par Olivier (19 Aug 2007 - 18:19)
J'ai du mal m'exprimer,

par exemple, je clique sur ce paragraphe :

<p id="toto">blablablablabla bla bal</p>


je souhaite récupérer l'id de l'élément cliqué soit "toto" !

A si en fait ça marche ce que tu m'as donné. Toutes mes excuses, à force de chercher je ne vois plus l'évident Smiley ohwell

Merci beaucoup à toi.
Modifié par sylvainbucule (19 Aug 2007 - 18:26)
Re,

en fait non, ça ne répond pas à mon besoin

tu proposes cela 
document.getElementById('xxx').onclick = function() {

// element

var elt = this;

// id de l'element

var idElt = this.getAttribute('id');

};


Le problème c'est que la fonction se déclenche au clique d'un élément dont l'id est connu puisque tu détectes le clique de l'élément via son id. Moi je veux récupérer l'id de l'élément cliqué sans le connaitre au préalable. Dans ton exemple xxx est l'id donc c'est que tu le connais déjà.
Modifié par sylvainbucule (19 Aug 2007 - 18:44)
Salut.

Tu dois faire une boucle qui va atteindre tous les éléments dont tu souhaites savoir quand ils sont cliqués et leur attribuée une fonction comme celle ci-dessus.

Édit : 2 secondes ... Smiley lol Je crois que c'est mon record. Smiley murf
Modifié par CNeo (19 Aug 2007 - 19:53)
Modérateur
Salut,

a écrit :
Le problème c'est que la fonction se déclenche au clique d'un élément dont l'id est connu
non, pas forcémment. Avec n'importe quel élément, c'est pareil.

this.getAttribute('id');, qu'on pourrait écrire this.id;, donne l'id de l'élément cliqué, quel qu'il soit. Si tu nommes la fonction réceptrice, tu peux t'en servir en plusieurs endroits sans pour autant connaitre l'id au préalable.

document.getElementsByTagName('a')[0].onclick = recupId;
document.getElementById('riri').onclick = recupId;

function recupId()
{
    if(this.id)
        alert(this.id);

    return false;
}

Modifié par koala64 (19 Aug 2007 - 19:45)
dois-je écrire (dans un fichier externe) :

windows.onload=chargerFonction;

function chargerFonction()
{
document.getElementsByTagName('a')[0].onclick = recupId;

document.getElementById('riri').onclick = recupId;
}

function recupId()

{
    if(this.id)
        alert(this.id);
    return false;

}


parce que moi ça ne donne rien, j'ai laissé tel quel avec "riri".
oui mais ce n'est qu'une erreur de recopie, dans la page de script j'ai bien window.onload

Cependant lorsque je clique sur un élément dans la page, il ne se passe rien.

J'ai cette erreur javascript :
Erreur : document.getElementById("riri") has no properties


De plus, il semble que cette erreur bloque mon autre script javascript (celui de l'arborescence de QuentinC.
Modérateur
C'est le window.onload qui bloque car il ne peut servir qu'une fois... Le mieux, c'est de s'en passer :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>

		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="content-script-type" content="text/javascript" />

		<title>Exemple</title>

		<script type="text/javascript"><!--

function connect(oElem, sEvType, fn, bCapture)
{
	return document.addEventListener ?
		oElem.addEventListener(sEvType, fn, bCapture):
		oElem.attachEvent ?
			oElem.attachEvent('on' + sEvType, fn):
			false;
}

function chargerFonction()
{
	if(document.getElementById('riri'))
		return document.getElementById('riri').onclick = recupId;
	
	return alert("Il n'y a pas d'élément avec l'id demandé");
}

function recupId()
{
    if(this.id)
        return alert(this.id);

    return false;
}

connect(window, 'load', chargerFonction, false);

		//--></script>

	</head>

	<body>

<a href="#" id="riri">coucou</a>

	</body>

</html>


tu devrais RElire le tuto que je t'ai montré la dernière fois, c'est expliqué... Smiley smile
Modifié par koala64 (19 Aug 2007 - 20:28)
je viens de tester ton script qui fonctionne mais il ne répond pas à mon besoin.

Si dans le body je rajoute cette ligne
<p><a href="#" id="loulou">attention</a></p>

et que je clique dessus, il ne se passe rien. Je n'ai pas récupéré l'id loulou. Ta fonction ne fonctionne qu'avec l'élément riri ce qui suppose de connaître à l'avance ton id.
Modérateur
oui et donc, qu'en déduis-tu ? Smiley sweatdrop

Comment faire pour qu'on puisse mettre autre chose que riri ?

Il te faut RERElire le tuto.
Modifié par koala64 (19 Aug 2007 - 20:33)
koala64 a écrit :
Il te faut RERElire le tuto.
Non ce qui lui faut c'est des cours de programmation ...
c'est vrai que je ne suis pas doué en javascript et pour des cours , je serais plus que preneur Smiley cligne

Si j'ai l'air d'un nul et bien je m'en excuse, j'ai relu le tuto et j'ai également relu ta solution.

Concernant ta solution, voilà ce que je comprends :
- au chargement de la page, il est vérifié qu'un élément nommé "riri" existe. Si ce n'est pas le cas, un message s'affiche.

- ensuite si je clique sur l'élément ayant pour id "riri", là j'ai un message qui m'informe que l'id "riri" a été récupéré.

- Maintenant (et c'est là que je dois vraiment passer pour un idiot) si je clique sur un autre élément ayant un id différent, il ne se passe rien. Normal me diras-tu puisque la fonction recup id n'est censée se déclencher qu'au clic de l'élément ayant l'id "riri".
Résultat, avec cette fonction (en l'état actuelle de mes infimes connaissances partielles et superficielles) je ne peux pas récupérer l'id des autres éléments.

Concernant le tuto, je vois comment créer des noeuds, des éléments etc... mais il ne me semble pas qu'il y ait en rapport quelque chose qui pourrait m'aider à récupérer l'id dans une page. Le tuto montre comment ajouter des éléments dans une page.

Je ne demande qu'a comprendre, parfois il faut juste d'un truc, parfois pas, alors je vous remercie grandement de votre patience.
Modifié par sylvainbucule (19 Aug 2007 - 21:22)
Modérateur
Pas de problème. Smiley cligne On peut avoir plus ou moins de facilité, je ne te dirais pas le contraire.

Bon prenons ces deux fonctions et leur code d'appel respectif :
function Riri()
{
   alert('riri');
}
Riri();


function Alerte(message)
{
    alert(message);
}
Alerte('coucou');
L'un ne peut renvoyer que riri alors que l'autre peut renvoyer n'importe quel message donc qu'en déduis-tu pour la fonction chargerFonction ? Comment la modifier ?

Une autre chose à savoir :

Lorsque tu affectes une fonction lors d'un clic sur un élément, tu lui affectes en réalité un gestionnaire d'événement : C'est une propriété et ça s'écrit comme ceci :
oEl.onclick = maFonction; // S'il n'y a pas d'arguments

// ou

oEl.onclick = function() // Si on veut passer un paramètre à maFonction
{
    maFonction(monArgument);
}

Modifié par koala64 (19 Aug 2007 - 21:33)
Merci pour l'explication et de ta patience Smiley biggrin

POur le passage de paramètres, pas de problème, je comprends bien le principe. Et c'est justement ce principe qui je pense, me bloque dans ma compréhension.

Koala64 :
a écrit :

Lorsque tu affectes une fonction lors d'un clic sur un élément, tu lui affectes en réalité un gestionnaire d'événement


Le problème est que je n'arrive pas à affecter la fonction à l'élément sans connaitre à l'avance quel élément va être cliqué. Je vois bien qu'il faudrait passer un paramètre à la fonction recupId qui serait l'élément cliqué, mais je ne vois vraiment pas comment faire ! Pffffffffffffffffffffffff, ça fait 4 jours que je me prends la tête sur cette arborescence ! autant dire que je fatigue, tout ça pour avoir un site qui satisfasse une qualité d'accessibilité.

Bon, ça fait du bien de parler Smiley langue . Encore d'autres pistes et une réponse par rapport à ce que j'ai proposé ?
Modifié par sylvainbucule (19 Aug 2007 - 22:34)
Étant donné que c'est l'id que tu cherches tu ne peux pas passer par ce paramètre pour attribuer l'évènement aux éléments que tu souhaites donc il faut passer par une autre caractéristique des éléments.
La caractéristique en question peut être par exemple :
- le nom de la balise (a, div, p ... )
- la classe
- l'attribut name
- une position dans un noeud
et que sais-je encore ...

En l'occurrence je crois que ce qui t'intéresse serait plus le nom de la balise donc comme je l'ai dit plus haut il faut que tu fasses une boucle qui va atteindre toutes les balises <a>.

Est-ce que c'est plus clair ou est-ce que je t'ai embrouillé encore plus ?
Regarde cet exemple, je pense qu'il va t'aider un peu à comprendre... que tu connaisse l'id ou pas, ça ne change rien pour le récupérer. Le but est bien d'avoir l'id quand on ne le connaît pas, non ?


<!doctype ...... >
<html ...... >
<head>
<script type="text/javascript">
function clic () {
alert(this.id);
return false;
}
function load () {
var liens = document.getElementsByTagName('a');
for (var i=0; i < liens.length; i++) 
liens[ i ] = clic;
}
window.onload = load;
</script>
...
</head>
<body>
<p>
<a href="#" id="toto">Test 1</a>
<br /><a href="#" id="titi">Test 2</a>
<br /><a href="#" id="tutu">Test 3</a>
</p>
...
</body>
</html>


Maintenant quelques explications :
Au chargement, je récupère tous les éléments <a> de la page. Ici j'en ai 3.
Je leur attribue la fonction clic comme gestionnaire d'évènement, la même aux 3.
Maintenant si tu cliques sur les liens... tadaaaaam... et tu n'as pas indiqué les id directement dans le code javascript.

Pour le problème du onload, il ne peut effectivement servir qu'une fois, à moins d'avoir recours à une petite astuce.

Remplacer ceci, qui est invalide (seule la 2ème fonction sera exécutée) :

window.onload = fonction1;
window.onload = fonction2;

Par ceci :

window.onload = function () {
fonction1();
fonction2();
}
Modérateur
Une précision : Si QuentinC te parle de liens, ce n'est pas par hasard Smiley smile

Pour que ta fonction soit aussi accessible au clavier, il faut que ton élément puisse prendre le focus. Si en revanche la navigation clavier est optionnelle pour ce que tu as à faire et donc que tu considères que le script ne doit fonctionner qu'à la souris, alors tu peux généraliser le principe à tout élément de la page avec quelquechose du genre :
function alerteId()
{
	if(this.id)
		alert(this.id);

	return false;
}

function init(aChilds)
{
	var iChild = aChilds.length;
		
	do
	{
		if(aChilds[--iChild].hasChildNodes())
			init(aChilds[iChild].childNodes);

		if(aChilds[iChild].nodeType === 1 && aChilds[iChild].id)
			aChilds[iChild].onclick = alerteId;
	}
	while(iChild > 0);

	return true;
}

window.onload = function()
{
	if(document.body.hasChildNodes())
		return init(document.body.childNodes);

	return false;
};
Dans window.onload, on dit que si le document à des noeuds enfants, on les transmet à la fonction init.

Une fois dans la fonction init, on boucle sur l'ensemble de ces noeuds. La première condition dit que si le noeud en cours contient des noeuds enfants, on les transmet à la fonction init (C'est une fonction récursive -> qui s'appelle elle même). La deuxième condition dit que si le noeud est du type élément et qu'il possède un id, on lui affecte le gestionnaire d'événement alerteId au clic sur celui-ci.

Au sein de la fonction alerteId, on dit que si l'élément possède un id, on le transmet via une alerte.
Modifié par koala64 (20 Aug 2007 - 00:17)
Bonjour,
Il y a une autre façon de récupérer l'id de l'élément cliqué :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>quel id</title>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> 
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Language" content="fr" />

		<script type="text/javascript"><!--
// basé sur script de koala 64
var oO =
{
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},

	cancelClick: function(e)
	{
		if(e && e.stopPropagation && e.preventDefault)
		{
			e.stopPropagation();
			e.preventDefault();
		}
		else if(e && window.event)
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

		return false;
	},

	quelId: function(e)
	{
		
		e = e || window.event;
		var el = e.target || e.srcElement;
		if(el.nodeType==3)el=el.parentNode
		if(el.id)
		{
			alert(el.id)
			// Empèche l'action normale du lien
			if(el.nodeName.toLowerCase()=='a')oO.cancelClick(e);
		}
  } 
};

oO.connect(document, 'click', oO.quelId, false);

		//--></script>
	</head>
	<body>
<a href="#" id="riri">coucou</a>
<p><a href="#" id="loulou">attention</a></p>
<div id="fifi"> et encore</div>
	</body>
</html>

Edit > extension aux éléments autres que des liens, plus d'action au clavier dans ce cas Smiley confus
Modifié par chmel (22 Aug 2007 - 00:06)
Pages :
Sujet clos
Aller à