[Résolu] JS: contenu d'une liste Array dans une liste déroulante

Bonjour tout le monde,

je suis débutante en Javascript et je dois réaliser un devoir pour ma formation, sur lequel je suis bloquée.
Je vous met dans le contexte, voici les consignes du devoir en question:
a) En JavaScript, une fois la page chargée (évènement onload), insérez dans l’élément HTML BODY un formulaire (FORM) comportant un menu déroulant (balise html <select>) permettant à l’utilisateur de choisir une note de musique en notation classique. N’ajoutez pas de bouton SUBMIT.
b) Créez en JavaScript un tableau de données (array) permettant de retrouver les correspondances.
c) Générez les balises OPTIONS du SELECT à l’aide d’une boucle forEach parcourant toutes les entrées du tableau. Ajoutez une option vide par défaut (pas de choix).

Ce que j'ai fait:

formulaire = document.createElement('FORM');
titre = document.createElement('LABEL');
  titre.innerHTML = "Note de musique: ";
menu = document.createElement('SELECT');
formulaire.appendChild(titre);
formulaire.appendChild(menu);
document.body.appendChild(formulaire);
  
  var noteClassique = new Array("", "Do", "Ré", "Mi", "Fa", "Sol", "La", "Si");
  var noteAmericaine = new Array ("", "C", "D", "E", "F", "G", "A", "B");
  
  noteClassique.forEach(function(note){
  	note = document.createElement('OPTION');
		menu.appendChild(note);
  	
	});

Le résultat:


Je suis donc bloquée au point c), comme vous pouvez le voir sur le screen, les notes de musiques ne s'affichent pas dans ma liste déroulante. Ma question est donc, comment je fais pour que les notes de musiques (de ma liste array: "noteClassique") s'affichent dans la liste déroulante?

En espérant que tout soit clair, merci d'avance!

Bonjour,

Tu es sur la bonne voie. Le problème se situe dans cette partie du code:

noteClassique.forEach(function(note){
    note = document.createElement('OPTION');
    menu.appendChild(note);
});

Pour résumer, voila ce que tu demandes à ton programme: "Boucle sur l'ensemble des notes de musique, et pour chaque note de musique, créé-moi un élément option et injecte-le dans le select."

Sauf que tu as fait une erreur et un oubli. L'erreur c'est que tu effaces à chaque fois le nom de la note en le remplaçant par un élément html de type option. Il faut donc que tu changes le nom de ta variable en noteElement par exemple.

Ensuite tu oublie de remplir ton option avec le nom de la note, comme ceci:

noteElement.innerHTML = note;

PS: Utilise plutôt une notation minuscule pour tes éléments html (form, label, select, option, etc).

PS2: Bon bah je viens de me faire doubler.
Modifié par Raphi (17 Apr 2019 - 16:10)

Raphi a écrit :

PS2: Bon bah je viens de me faire doubler.

Je suis le lucky luck de la réponse.....


Non je blague
j'ai mon script qui m'avertie des nouveaux sujet qui pourrait potentiellement m’intéresser (js, php, débutant)

Moi j'ai juste ma touche F5...

Juste afin d'être sûre que j'ai compris:

options.appendChild(document.createTextNode(element));//le texte visible

-> On se sert de

.createTextNode

parce que les éléments des <option> sont de type texte?

options.value = element; //la valeur réel

-> le

.value

sert à récupérer les "valeurs" que j'ai itéré auparavant dans le new Array ?

iAnaylli a écrit :
Juste afin d'être sûre que j'ai compris:

On se sert de

.createTextNode

parce que les éléments des option sont de type texte?

Non en faite createTextNode appartient au "document" pas à option.

iAnaylli a écrit :

options.value = element; //la valeur réel

sert à récupérer les "valeurs" que j'ai itéré auparavant dans le new Array ?

non la valeur réel , c'est à dire l'element courant de ta boucle (de ton itération) est "element" (qui correspons aux valeur de ton tableau oui) et c'est elle qu'on accroche à chaque <option>
Le .value se fait cette fois sur la balise <option> et va inserer une valeur au niveau de l'attribut d'une balise
exemple:
<option value="ma value"></option>
<input value="ma value aussi"/>

Si javais fais
options.className = element
là j'aurais assigner une classe à chaque options avec comme nom la note courante.
Modifié par JENCAL (17 Apr 2019 - 16:47)

Je vais plus en détails :
Je reprend le code suivant :

noteClassique.forEach(function(element) {
  console.log(element);
  options = document.createElement('OPTION');
  options.appendChild(document.createTextNode(element));//le texte visible
  options.value = element; //la valeur réel
  menu.appendChild(options);//on accroche chaque option
}); 

Celui ci fonctionne.
Si je change options.appendChild(document.createTextNode(element)); par options.appendChild(document.createTextNode("TEST"));
j'aurais une liste déroulante avec une dizaine d’élément, visuellement on verra que TEST, TEST, TEST etc..... pour chaque element, mais la valeur réel derrière sera toujours options.value = element; donc la note qui contenue dans ton tableau.

Exemple concret ici : https://codepen.io/JUSEN/pen/GLQMJr

Deux liste déroulante, qui n'ont pas le même "text" mais la vrai "value" derrière chaque options est strictement la même, derrière chaque "TEST" correspond une note.

options.appendChild(document.createTextNode(element));//le texte visible

-> en gros ça veut dire: "on crée un nœud de type texte dans le document (donc de manière générale), qu'on va accrocher aux <option>" ?

options.appendChild(document.createTextNode(element));//le texte visible

-> En gros element est comme une variable ici? (qui contient les valeurs "Do", "Ré", "Mi", etc...)
Modifié par iAnaylli (17 Apr 2019 - 16:50)

Ok super!

Par contre je n'arrive quand même pas à comprendre/interpréter la ligne:

options.value = element; //la valeur réel

En plus j'ai remarqué que si on l'enlevait, ça fonctionnait quand même.

Et à titre d'informations,

Tu es obliger d'avoir un attribut "name" pour chaque élement que tu souhaite envoyé vie ton formulaire. mais ça tu le verras avec tes cours je pense.

Donc ici

options.value = element; //la valeur réel

sert uniquement à la récupération de valeurs du formulaire (lorsqu'il sera envoyé)?