Créer un formulaire dynamique

**DarkStevy** · 18/07/2020, 02h17

Bonjour, je suis débutant en JS et je bloque sur un problème dans mon code. Je dois créé un formulaire avec javascript, qui propose une liste de choix. Quand on clique sur un des choix, un message avec le résultat apparaît dans une balise p. La valeur s'affiche bien cependant la valeur associé elle ne s'affiche pas et je n'arrive pas à trouver la solution.

Voici mon code JS:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
window.onload = addElement;
 
function addElement() {
  var notes = {C : "do", D : "ré", E : "mi", F : "fa", G : "sol", A : "la", B : "si"};
 
  var form = document.createElement("form");
  form.method = "post";
  form.action = "#";
  form.id = "form1";
 
  var select = document.createElement("select");
  select.id = "notes";
  select.name = "notes";
  form.append(select);
  var option = document.createElement("option");
  option.value = "Aucune note n'est demandé";
  select.append(option);
 
  for (var id in notes) {
    var option = document.createElement("option");
    option.value = id;
    option.textContent = notes[id];
    select.append(option);
  }
 
  var p = document.createElement("p");
  p.id = "resultat";
  p.textContent = "Aucune note n'est demandé";
  document.body.append(form, p);
}
 
(function(){
  var affich = {
    init: function() {
      console.debug('init');
      window.addEventListener('load', function(event){
        var resultat = document.getElementById('resultat')
        var element = document.getElementById('notes');
        element.addEventListener('change', function(event){
          console.debug('change');
          resultat.textContent = "La notation americaine pour la note " + notes.value + " est " + notes.text;
        });
      });
    }
  };
  affich.init();
})();