Liste déroulante en JavaScript

**dagan20** · 06/07/2020, 19h34

Bonjour à tous
Est ce que quelqu'un peut m'aider à trouver le chemin pour résoudre ce problème.

----------------------le sujet------------------------

En JavaScript, si l’utilisateur clique sur le bouton “notation”, 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)
Le JavaScript doit être unobstrusive.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Notation américaine</title>
</head>
<body>
<input type="button" name="button" value="notation" onclick="notes()">
 
    <script src="main.js"></script>
 
</body>
</html>

Code JavaScript :

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
form = document.createElement("form");
label = document.createElement("label");
label.innerHTML = "Trouver la note américaine de : ";
select = document.createElement("select");
form.appendChild(label);
form.appendChild(select);
document.body.appendChild(form);
paragraphe = document.createElement("p");
document.body.appendChild(paragraphe);
function notes(){
  let notes;
  notes = {
    "": "",
    C: "Do",
    D: "Re",
    E: "Mi",
    F: "Fa",
    G: "Sol",
    A: "La",
    B: "Si",
  };
}
 
 
for (const key in notes) {
  const option = document.createElement("option");
  option.value = key;
  option.textContent = notes[key];
  select.appendChild(option);
}
 
select.addEventListener("change", function () {
  paragraphe.textContent =
    "La notation américaine pour la note " +
    select.options[this.selectedIndex].textContent +
    " est " +
    this.value;
});

si je clique sur notation rien ne se passe

merci d'avance

**ProgElecT** · 06/07/2020, 23h09

Salut

Pourquoi la déclaration de ton array est elle dans une fonction?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
//function notes(){
  let notes;
  notes = {
    "": "",
    C: "Do",
    D: "Re",
    E: "Mi",
    F: "Fa",
    G: "Sol",
    A: "La",
    B: "Si",
  };
//}

là cela fonctionne.
Édit:
J'ajouterai ceci dans l’événement pour indiquer le non choix

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
select.addEventListener("change", function ()
	{
		if (this.value !=="")
		{
			paragraphe.textContent =
			"La notation américaine pour la note " +
			select.options[this.selectedIndex].textContent +
			" est " +
			this.value;
			}else{
			paragraphe.textContent = "pas de choix";
		}
	}
);

**dagan20** · 07/07/2020, 10h23

Bonjour

J'ai revu le code et j'obtiens ceci

-------------------------------------------JavaScript-------------------------

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
form = document.createElement("form");
label = document.createElement("label");
label.innerHTML = "Trouvez la notation américaine de : ";
select = document.createElement("select");
form.appendChild(label);
form.appendChild(select);
document.body.appendChild(form);
paragraphe = document.createElement("p");
document.body.appendChild(paragraphe);
 
const notes = {
    "": "",
    C: "Do",
    D: "Re",
    E: "Mi",
    F: "Fa",
    G: "Sol",
    A: "La",
    B: "Si",
};
 
for (const key in notes) {
    const option = document.createElement("option");
    option.value = key;
    option.textContent = notes[key];
    select.appendChild(option);
}
 
select.addEventListener("change", function() {
    paragraphe.textContent = "La notation américaine pour la note " + select.options[this.selectedIndex].textContent + " est " + this.value;
});

dans le fichier HTML je dois créer un bouton Notation lié au script sur lequel on clique pour avoir une liste déroulante.

**javatwister** · 07/07/2020, 10h36

Bonjour,

Insère au moins ton bouton dans un conteneur et donne-lui un id, pas un name;

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p>
   <input type="button" id="b" value="notation" />
</p>

Par ailleurs, ton label ne sert à rien, en l'état...

Modifie le code comme ça:

Code javascript :

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
document.getElementById("b").addEventListener("click",function(){
 
	const notes = {
		"": "",
		C: "Do",
		D: "Re",
		E: "Mi",
		F: "Fa",
		G: "Sol",
		A: "La",
		B: "Si",
	};
 
	const f = document.createElement("form");
 
	const lab = document.createElement("label");
	lab.textContent = "Trouver la note américaine de : ";
	lab.setAttribute("for","sel");
 
	const sel = document.createElement("select");
	sel.setAttribute("id","sel");
	for(let key in notes){
		let opt = document.createElement("option");
		opt.value = key;
		opt.text = notes[key];
		sel.appendChild(opt);
	}
 
	f.appendChild(lab);
	f.appendChild(sel);
	document.body.appendChild(f);
 
	const p = document.createElement("p");
	document.body.appendChild(p);
 
	sel.addEventListener("change", function () {
		p.textContent =
		this.value!="" ?
		`La notation américaine pour la note ${sel.options[this.selectedIndex].text} est ${this.value}.`:
		"Choisissez une note."
	});
},{once:true}
)

**dagan20** · 07/07/2020, 10h58

Bonjour
Je demande de l'aide sur ce sujet là qui est une suite de ce code:

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
document.getElementById("button").addEventListener("click", function () {
 
  const notes = {
    "": "",
    C: "Do",
    D: "Re",
    E: "Mi",
    F: "Fa",
    G: "Sol",
    A: "La",
    B: "Si",
  };
 
  const f = document.createElement("form");
 
  const lab = document.createElement("label");
  lab.textContent = "Trouver la note américaine de : ";
  lab.setAttribute("for", "sel");
 
  const sel = document.createElement("select");
  sel.setAttribute("id", "sel");
  for (let key in notes) {
    let opt = document.createElement("option");
    opt.value = key;
    opt.text = notes[key];
    sel.appendChild(opt);
  }
 
  f.appendChild(lab);
  f.appendChild(sel);
  document.body.appendChild(f);
 
  const p = document.createElement("p");
  document.body.appendChild(p);
 
  sel.addEventListener("change", function () {
    p.textContent =
      this.value != "" ?
      `La notation américaine pour la note ${sel.options[this.selectedIndex].text} est ${this.value}.` :
      "Choisissez une note."
  });
}, {
  once: true
})

Lorsque l’utilisateur choisit une note :
a) Envoyez au serveur PHP une requête AJAX en envoyant la valeur de l’élément et en récupérant en JavaScript
l’url du script PHP dans l’attribut ACTION de l’élément FORM.
Sur le serveur
b) A l’aide de la valeur du SELECT, il doit retrouver dans son tableau de correspondance (array) sa correspondance
américaine (voir Devoir N° 1 de JavaScript perfectionnement)
c) Votre code PHP doit retourner le message « La notation américaine pour la note X est X». Javascript le récupère
et l’affiche dans un élément de la page.
Le Javascript doit être unobstrusive.

Merci d'avance

**NoSmoking** · 08/07/2020, 17h06

Bonjour,
hormis le fait de recopier le code qui t'a été fournie qu'est ce que tu as trouvé comme réponse/code à mettre en place !!!!

Je sais c'est pas sympa mais je ne suis pas sûr que tu fasses de réels efforts d'apprentissage, fait moi me tromper

**dagan20** · 08/07/2020, 17h31

Bonjour

Figure toi je fais beaucoup d'efforts pour comprendre les explications qu'on me donne. C’est d’ailleurs par le biais de vos codes que je parviens à comprendre le sujet de mieux en mieux. Figure toi à chaque fois qu'on me donne une solution , je l'étudie minutieusement.Quand parfois tu es nouveau dans quelque chose il est nécessaire de demander de l'aide, si je ne fais pas d'efforts c'est à moi que je fais du tort mais pas à quelqu'un d'autre.

Respectueusement votre,

**dagan20** · 08/07/2020, 18h14

Bonjour

En plus j'ai donné le code que j'ai fait mais celui-ci a totalement été ignoré et à la place j'ai reçu un nouveau code. Donc j'ai fait un effort à la base. Je trouve bien de reprendre les codes que les experts nous donnent à nous débutants. C'est la raison pour laquelle je l'ai repris c'est tout.
Si on est là en train de chercher de l'aide ce n'est pas qu'on croise les bras et ne rien faire, c'est faux, tout débutant est passé par là. J'en convient que ce n'est pas sympa du tout car des remarques de ce genre emmènent certains débutants à laisser tout tomber.
J'aimerais mieux qu'on nous encourage pour nous motiver à aller jusqu'au bout de l'effort et surtout qu'on prenne le temps de mieux nous expliquer les choses. Car c'est la raison de ce genre de forum mais cela ne doit pas être l'inverse, un lieu pour donner des leçons de moral.

Merci de votre comprehension
Respectueusement votre.

**NoSmoking** · 08/07/2020, 19h41

Envoyé par NoSmoking

(...), fait moi me tromper

tu y es en partie arrivé

J'attire quand même ton attention que dans ta dernière requête il y à 3 questions qui mériterait chacune une discussion.

<pour rappel>

Une discussion = une question

Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

</pour rappel>

Si l'on prend simplement la première :

a) Envoyez au serveur PHP une requête AJAX en envoyant la valeur de l’élément et en récupérant en JavaScript
l’url du script PHP dans l’attribut ACTION de l’élément FORM.

qu'elles sont tes connaissances en Ajax et qu'est ce qui coince ?

Je te conseille : Comprendre les mécanismes d'AJAX

Liste déroulante en JavaScript

JavaScript

Discussions similaires

Partager

Partager