Liste déroulante en JavaScript
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:
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:
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
