11521 sujets

JavaScript, DOM et API Web HTML5

Probleme exercice evenement javascript

Bonjour,
Il se trouves que j'ai un problème lors de la résolution d'un exercice.
Je suis envoi le sujet

Demande 1

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)
Le JavaScript doit être unobstrusive.

Demande 2

Complétez votre code JavaScript pour fournir le comportement suivant. Écoutez en JavaScript, la modification de l’élément Select.
Lorsque l’utilisateur choisit une note :
a) A l’aide de la valeur du SELECT, il doit retrouver dans le tableau (array) sa correspondance américaine.
b) Le résultat s’affiche alors dans un message : « La notation américaine pour la note X est X».

Je suis arrivé au bout de la demande 1 mais la demande 2 est plus fort que moi.

Voici mon code


form = document.createElement('form');
label = document.createElement('label');
label.innerHTML = "Trouver la note américaine: ";
select = document.createElement('select');
form.appendChild(label);
form.appendChild(select);
document.body.appendChild(form);
paragraphe = document.createElement('p');
document.body.appendChild(paragraphe);
//tableau array  
var noteClassique = ['', "Do", "Re", "Mi", "Fa", "Sol", "La", "Si"];
var noteAmericaine = ['', "C", "D", "E", "F", "G", "A", "B"];
noteClassique.forEach(function(index, item){	
option = document.createElement('option');
option.setAttribute("id", "note");
option.innerHTML = index;
option.value=
select.appendChild(option);
console.log(option)
});
Modérateur
bonjour ypiard85 et bienvenue,

Je te corrige vite fait ton code. Je t'invite à me lire : 


form = document.createElement('form');
label = document.createElement('label');
label.innerHTML = "Trouver la note américaine: ";
select = document.createElement('select');
form.appendChild(label);
form.appendChild(select);
document.body.appendChild(form);
paragraphe = document.createElement('p');
document.body.appendChild(paragraphe);

var notes = {
    "" : "",
    "C" : "Do",
    "D" : "Re",
    "E" : "Mi",
    "F" : "Fa",
    "G" : "Sol",
    "H" : "La",
};


for(var key in notes){
    var 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;
});


lien annexe :
addEventListener
Bonjour,

Cette exercice m'interresse, j'ai quasiment le meme a faire mais je sais pas comment faire fonctionner celui ci, pouvez vous m'aider s'il vous plait.

Merci.
Bonjour Didiercp

As tu regardé la solution proposé par niuxe ?
Modifié par JENCAL (13 Feb 2020 - 10:11)
Bonsoir,

J'ai le même exercice à faire.

Aprés avoir tester votre code, il ne fonctionne pas.

voici le code complet HTML et JAVASCRIPT, pouvez me corriger s'il vous plait.

Code HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Correspondance des notesde musique Francaises Anglaises</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>

</body>
</html>

Code JAVASCRIPT :
(function(){
var index = {
init: function(){
window.addEventListener('load', function(event){

form = document.createElement('form');
label = document.createElement('label');
label.innerHTML = "Trouver la note américaine: ";
select = document.createElement('select');
form.appendChild(label);
form.appendChild(select);
document.body.appendChild(form);
paragraphe = document.createElement('p');
document.body.appendChild(paragraphe);

var notes = {
" " : " ",
"C" : "Do",
"D" : "Re",
"E" : "Mi",
"F" : "Fa",
"G" : "Sol",
"H" : "La"
};


for(var key in notes){
var option = document.createElement('option');
option.value = key;
option.textContent = notes Smiley 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;
});

}
}
}
index.init();
})();
Bonjour, j'ai suivi exactement ce qu'à écrit niuxe mais ça ne fonctionne pas.
Pouvez-vous m'aider?


window.onload=function(){

form = document.createElement('form');
label = document.createElement('label');
label.innerHTML = "Trouver la note américaine: ";
select = document.createElement('select');
form.appenChild(label);
form.appenChild(select);
document.body.appenChild(form);
paragraphe = document.createElement('p');
document.body.appenChild(paragraphe);

var notes = {
"" : "",
"C" : "Do",
"D" : "Re",
"E" : "Mi",
"F" : "Fa",
"G" : "Sol",
"A" : "La",
"B" : "Si",
"C" : "Do",
};

for(var key in notes){
var option = document.createElement('option');
option.value = key;
option.textContent = notes Smiley key ;
select.appenChild(option);
}

select.addEventListener('change', function(){
paragraphe.textContent = 'La notation américaine pour la note' + select.options[this.selectedIndex].textContent + ' est ' + this.value;
});

}
Sujet clos
Aller à