[DOM] Appel de fonction dans les événements

**SolidWorm** · 26/09/2007, 13h31

Bonjour,

Je rencontre un problème récurent dans mes scripts JS, dont voici un exemple simplifié :

Normalement, les deux codes suivants sont sencés donner le même résultat.

Dans le premier, on affiche simplement un formulaire select avec un appelle à la fonction alert en cas de clique sur l'une des option.

Dans le second, au lieu de d'afficher directement le code, on le génére au chargement de la page (grâce à l'appelle à la fonction ma_page() via onLoad dans le body) en modifiant le DOM. Hors dans ce code, l'événement onClick appellant la fonction alert ne semble pas être pris en compte... C'est à dire que lorsqu'on clique sur une option, rien ne se passe

Ma question est donc pourquoi ?

Code n°1

Code :

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

1
2
3
4
5
6
7
 
<body>
<select>
<option onClick="alert('Bonjour')">Bonjour</option>
<option onClick="alert('Aurevoir')">Aurevoir</option>
</select>
</body>

Code n°2

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
26
27
28
29
 
<!-- Code JavaScript ne prennant pas en compte les événements !-->
<script type="text/javascript">
function ma_page()
{
	// Récupération de l'objet body
	var obj = document.getElementById("page");
 
	// Création du nouveau select
	var nouveau = document.createElement("select");
 
	// Création de l'option bonjour
	var bonjour = document.createElement("option");
	bonjour.onClick = "alert('Bonjour')"; // On ajoute onClick="alert('Bonjour')" à l'option Bonjour
	bonjour.appendChild(document.createTextNode("Bonjour"), bonjour.firstChild); // On écrit Bonjour entre les deux balises de option
	nouveau.appendChild(bonjour, nouveau.firstChild); // On met l'option Bonjour dans le select
 
	// Création de l'option aurevoir
	var aurevoir = document.createElement("option");
	aurevoir.onClick = "alert('Aurevoir')"; // On ajoute onClick="alert('Aurevoir')" à l'option Aurevoir
	aurevoir.appendChild(document.createTextNode("Aurevoir"), aurevoir.firstChild); // On écrit Aurevoir entre les deux balises option
	nouveau.appendChild(aurevoir, nouveau.firstChild); // On met l'option Aurevoir dans le select (donc à la suite de l'option Bonjour)
 
	// Ajout du select dans le body de la page
	obj.appendChild(nouveau, obj.firstChild);
}
</script>
<body onLoad="ma_page()" id="page">
</body>

**E.Bzz** · 26/09/2007, 13h58

Bonjour,
essaye

Code :

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

bonjour.onclick = function() {alert('Bonjour');}

Sinon, même dans le 1° cas, mieux vaut gérer le onclick au niveau du select

Code :

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

1
2
3
4
<select onclick="alert(this.value);">
<option value="Bonjour">Bonjour</option>
<option value="Au revoir">Au revoir</option>
</select>

A+

**JulienC** · 26/09/2007, 13h58

Salut,

Un évènement est une fonction et non une chaine de caractères :

Code :

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

bonjour.onClick = "alert('Bonjour')";

doit s'écrire

Code :

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

bonjour.onclick = function() { alert('Bonjour'); }

**SolidWorm** · 26/09/2007, 14h19

La combinaison de vos deux propositions marche impécablement bien

**d-Rek** · 26/09/2007, 16h59

Clique sur ton bouton

[DOM] Appel de fonction dans les événements

JavaScript

Discussions similaires

Partager

Partager