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

Liste déroulante en JavaScript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager