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>