Evénement au clic de type Element.onclick = function

**xess91** · 01/03/2010, 19h46

Bonjour à tous,

Comme dit dans le titre je cherche à lancer une fonction au clic sur un élement de la manière suivante:

element.onclick = function;

j'ai fait un script d'essai suite à quelques lectures de documents sur le web mais qui ne fonctionne pas, pourtant je suis sûr d'avoir suivi l'article à la lettre enfin on sait jamais, peut-être que j'ai loupé quelque chose. Voici mon script:

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
17
18
19
20
21
22
23
24
25
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
	<head>
		<script type="text/javascript">	
 
		var el = document.getElementById('rouge');
		el.onclick = change;
 
		function change()
			{
			document.getElementById("vert").style.zIndex = "2";
			document.getElementById("rouge").style.zIndex = "1";
			}				
		</script>
	</head>
<body>
<div id="rouge" style="width:500px;height:500px;background:red;position:relative;z-index:2;">
	jkhcxkvjh
</div>
<div id="vert" style="width:500px;height:500px;background:green;position:relative;z-index:1;top:-250px;left:250px;">
	jkhvhxkjvhx
</div>
</body>
</html>

et voici le code erreur que j'obtiens :

Détails de l’erreur de la page Web

Message*: 'el' a la valeur Null ou n'est pas un objet.
Ligne*: 7
Caractère*: 3
Code*: 0
URI*: http://localhost/z-index.html

Merci à tous pour vos réponses et vos aides.

**Bovino** · 01/03/2010, 19h50

Envoyé par xess91

je suis sûr d'avoir suivi l'article à la lettre enfin on sait jamais, peut-être que j'ai loupé quelque chose.

Oui, au moment où tu déclares ta variable el, le DOM n'a pas encore été formé, donc il n'y a pas dans le document d'élément avec l'id 'rouge', donc el a bien la valeur null

Regarde du coté de window.onload.

**xess91** · 01/03/2010, 19h55

C'est à dire du coté de window.onload !!

Dans quel but...pour quel element...pour lancer une fonction... ???

**Bovino** · 01/03/2010, 20h07

onload est un événement déclenché lorsqu'un élément de type remplacé (body, img, frame, object etc.) a terminé d'être chargé.
Il est essentiellement utilisé en attribut de la balise body ou de l'objet JavaScript window pour savoir que la page est complètement chargée et que le DOM est disponible.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.onload = function(){...}

ou

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="...">

Dans ton cas par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
window.onload = function(){	
    var el = document.getElementById('rouge');
    el.onclick = change;
}

**xess91** · 01/03/2010, 20h20

Ok je comprends maintenant. Je te remercie

EDIT:

juste une dernière question comment connaitre l'id de l'element cliqué ?

J'ai essayé avec currentTarget et event.target mais ma syntaxe ne doit pas être correcte car j'ai en retour élement indéfini....

Youpi j'ai la soluce this.id pourquoi faire simple quand on peut faire compliqué..

..

Merci Developpez.net un vrai forum de pro et bravo à l'équipe de modaux je vous nommes les incollables sauf pour "Adobe AIR" non je déconne un grand merci à vous

Evénement au clic de type Element.onclick = function

JavaScript

Discussions similaires

Partager

Partager