11480 sujets

JavaScript, DOM et API Web HTML5

Pages :
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:
upload/1555507878-74541-note.png

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! Smiley cligne
Salut

Effectivement petite erreur lors de l'insertion d'options

https://codepen.io/JUSEN/pen/GLQMJr

J'ai donc corriger ton code.

Je m'explique :
Ton code :
note = document.createElement('OPTION');
menu.appendChild(note);


1er ligne tu créer une balise <option> en javasript
2eme ligne tu accroche cette <option> à ta balise <select> (que tu as appelé menu)

Donc tu avais bien le bon nombre d'élement dans ta liste déroulante, mais elle était vide. Il leur faut une valeur et un genre de label

<option value="Ma valeur">Mon texte qui est visible</option>

Dans ton cas (et dans ma correction) c'est la même. Smiley murf

Hésite pas si tu as d'autres questions Smiley smile
Modifié par JENCAL (17 Apr 2019 - 15:55)
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. Smiley lol
Modifié par Raphi (17 Apr 2019 - 16:10)
Raphi a écrit :

PS2: Bon bah je viens de me faire doubler. Smiley lol


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


Non je blague Smiley roflol
j'ai mon script qui m'avertie des nouveaux sujet qui pourrait potentiellement m’intéresser (js, php, débutant)
Merci pour vos réponses (rapides!) à tous les deux!

J'ai bien compris la méthode de Raphi, mais pas la tienne JENCAL Smiley ohwell
Si éventuellement tu pouvais m'expliquer davantage ta méthode, ça m'intéresserait de la comprendre Smiley smile
iAnaylli a écrit :
Merci pour vos réponses (rapides!) à tous les deux!

J'ai bien compris la méthode de Raphi, mais pas la tienne JENCAL Smiley ohwell
Si éventuellement tu pouvais m'expliquer davantage ta méthode, ça m'intéresserait de la comprendre Smiley smile


Tu as juste a regarder le codepen (le lien) et j'ai juste rajouter deux lignes dans la boucle avec un petit commentaire.

En gros tu faisais bien sauf que tu ne donner ni le texte ni la valeur à la balise <option> donc elle été vide.
@Jencal,

Pourquoi cette ligne:
options.appendChild(document.createTextNode(element));

et pas plutôt:
options.innerHTML = element;


Je trouve ça plus clair comme syntaxe. À moins qu'il y ait une raison particulière à utiliser cette approche?
Modifié par Raphi (17 Apr 2019 - 16:27)
oué, mais déjà "créer un formulaire via javascript" ça pue, alors le côté
document.createTextNode c'est plus pour montrer au prof que tu utilise des fonction natif du document.

c'est surtout pour aller avec l'esprit du document.createElement

si ça tenait qu'a moi j'utiliserais innerHTML
Modifié par JENCAL (17 Apr 2019 - 16:29)
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)
-> 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>" ?

Exactement !! et on lui donne du texte, ici le texte est parlant ce sont des notes.

-> En gros element est comme une variable ici? (qui contient les valeurs "Do", "Ré", "Mi", etc...)

100%!! element est une variable. Une variable uniquement accessible dans ta boucle forEach
grâce à function(element)
Modifié par JENCAL (17 Apr 2019 - 16:58)
Ok super! Smiley biggrin

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.
iAnaylli a écrit :
Ok super! Smiley biggrin

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.


Oui ça fonctionne quand même mais uniquement pour l'affichage
mais ton formulaire, quand tu le soumets (quand tu fais un submit comme on dit) tu envoie les "value" de ton element. pas le texte.
Donc si tu ne précise pas de valeurs, ton <option> sera vide. Au final, value est invisible pour l'utilisateur, mais c'est pourtant cette donnée qui sera envoyé au serveur via ton formulaire.


dans cette ligne :

<option value="Ma valeur">Mon Texte</option>
Lors de la soumission de formulaire c'est value="Ma valeur" qui est envoyé


P.S si tu fais un clic droit > inspecter l'element sur ta liste déroulante, tu verras qu'il n'y a pas de value="" si tu enlève la ligne.

Voir ici : https://www.w3schools.com/tags/att_option_value.asp pour plus de compréhension
*value The value to be sent to the server*
Modifié par JENCAL (17 Apr 2019 - 17:16)
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é)?
iAnaylli a écrit :
Donc ici
options.value = element; //la valeur réel

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


Oui, c'est une donnée essentielle pour un "formulaire".
Elle est invisible sauf si tu regarder dans l'inspecteur d'element.
D'accord, d'accord, bah merci beaucoup! Tout cela m'a permis de mieux comprendre mon cours du coup et, bien sûr, de poursuivre mon devoir! Smiley ravi
Modifié par iAnaylli (17 Apr 2019 - 17:34)
Pages :