[DOM] Appel de fonction dans les événements
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 :pleure:
Ma question est donc pourquoi ?
Code n°1
Code:
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:
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> |
