Insérer un FORM et un SELECT dynamiquement

**nagyp** · 23/05/2020, 16h04

Bonjour à tous.
étant en cours à distance en formation intégrateur développeur chez ESECAD. J'en arrive au module JAVASCRIPT.
je galère pas mal avec la ponctuation (entre autre). Je dois rendre un devoir dont voici les grosses lignes.

Créez une page web avec un élément BODY vierge, avec un script JavaScript attaché et une feuille CSS ;
Notes de musique classique notation américaine.
En JavaScript, 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.

Mon souci est principalement au niveau de l'inclusion du résultat de la boucle foreach dans le formulaire:

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
// tableau
 
notesstd = new Array(" ", "do","ré","mi","fa","sol","la","si");
notesus= new Array("pas de choix","C","D","E","F","G","A","B");
monTableau = new Array(notesstd,notesus);
document.write("monTableau");
 
notesstd.forEach((item, index) => {
 // (document.write(item) + "</br>"); //value
 
//Fin tableau
document.write("<FORM>");
document.write("<SELECT>");
 
document.write('<option value"document.write(index)">document.write(item)</option>');
 
document.write('</SELECT>');
document.write('</FORM>');
 })
document.write(notesus[2]);
// fin formulaire

Pour ceux qui voudrais bien m'aider je rajoute le PHP

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
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<?php
$result = "";
if ($_SERVER['REQUEST_METHOD'] == "POST"){
        if (empty($_POST['note_classique'])){
                $result = "<p>Aucune note choisie! </p>" ;
        }
        else{
                $note = $_POST['note_classique'];
                $result = '<p>la note classique \' '.$note.'\' corespond à la note americaine \' '.$notes[$note].'\' .</p>';
        }
        if (strtolower($_SERVER['http_X_RESQUESTED_WITH']) == 'xmlhttprequest')  {
        echo $result;
        return; 
}
}
 
?>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>	Notation classique notation américaine</title>
		<script src="java1.js" type="text/javascript"></script>
	</head>
	<body>
 
	</body>
</html>

A tous je vous remercie de votre aide et de votre soutiens.

**NoSmoking** · 28/05/2020, 16h44

Bonjour,

Mon souci est principalement au niveau de l'inclusion du résultat de la boucle foreach dans le formulaire:

non ton problème est dans la démarche pour arriver au résultat final et accessoirement les bases du JavaScript.
Si l'on prend ces deux llignes :

Code :

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

1
2
notesstd = new Array(" ", "do","ré","mi","fa","sol","la","si");
notesus= new Array("pas de choix","C","D","E","F","G","A","B");

Pas de déclarations des variables avec les mots clés var, let ou const.
Une bonne pratique est d'écrire le noms des variables au format camelCase.

On pourrait donc obtenir

Code :

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

1
2
const notesStd = [" ", "do", "ré", "mi", "fa", "sol", "la", "si"];
const notesUs = ["pas de choix", "C", "D", "E", "F", "G", "A", "B"];

Concernant les lignes :

Code :

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

1
2
monTableau = new Array(notesstd,notesus);
document.write("monTableau");

elles ne te servent à rien, tu ne les utilises pas.
L'utilisation de la méthode write de document n'est pas souhaitable dans ton cas, à oublier donc il existe des méthodes bien « plus élégantes ».

Ressources : Les tableaux : objet Array

Concernant la construction de tes éléments comme document.write("<FORM>"), tu peux utiliser les méthodes dédiées comment document.createElement, on crée l'élément, on crée et on ajoute ses enfants avec element.appendChild, le <select>, les <option> au <select> et on ajoute au document le tout avec le même appendChild(), c'est un peu verbeux mais cela aura au moins le mérite d'être clair.

N'hésites pas à regarder les liens fournis, ils sont riches d'enseignements et si tu débutes autant débuter correctement.

**javatwister** · 28/05/2020, 17h25

J'ajouterais:

- N'écris pas de noms de balise en majuscules;
- Utilise correctement les guillemets et le signe d'affectation (ta ligne 15 est aberrante);
- avec ton forEach actuel, tu essayais de créer un formulaire et un menu déroulant pour chaque note...;
- Tu n'auras jamais de raison valable d'utiliser document.write(), donc, oublie que cette méthode existe.

**nagyp** · 28/05/2020, 22h56

Envoyé par NoSmoking

Bonjour,
...

Merci de t'on aide précieuse franchement en quelque ligne tu m'a permis d'y voir un peut plus claire que dans les cours ESECAD

Bon j'ai repris tous le travail je pense être sur la bonne voie il ne me reste plus qu'a faire rentrer les éléments de la boucle dans le formulaire

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
let notesstd =[];
let notesus =[];
notesstd = [" ", "do","ré","mi","fa","sol","la","si"];
notesus = ["pas de choix","C","D","E","F","G","A","B"];
var titre = document.createElement('h1');
titre.innerHTML = "choisisez une note francaise"
 
// fin tableau std
var form = document.createElement('form'); //<form></form>
var select = document.createElement('select');
var option = document.createElement('option');
document.body.appendChild(select);
//document.select.appendChild(option);
 
notesstd.forEach(function(element, index){
 
});

**javatwister** · 29/05/2020, 10h00

J'ai juste repris ton dernier essai, pour que tu aies "au moins" un affichage clair dans une page;

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
let notesstd =[];
let notesus =[];
notesstd = [" ", "do","ré","mi","fa","sol","la","si"];
notesus = ["pas de choix","C","D","E","F","G","A","B"];
var titre = document.createElement('h1');
titre.innerHTML = "choisisez une note francaise"
 
// fin tableau std
var form = document.createElement('form'); //<form></form>
var select = document.createElement('select');
var option = document.createElement('option');
option.text="choisissez";// par défaut
select.appendChild(option)
document.getElementById("c").appendChild(form);// insère ton form dans un bloc de la page
form.appendChild(select);
//document.select.appendChild(option);
 
notesstd.forEach(function(element){// chaque note devient une option du select
	let opt=option.cloneNode();
	opt.text=element;
	opt.value=element;
	select.appendChild(opt)
});

**NoSmoking** · 29/05/2020, 10h00

•••

Code :

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

1
2
3
4
let notesstd =[];
let notesus =[];
notesstd = [" ", "do","ré","mi","fa","sol","la","si"];
notesus = ["pas de choix","C","D","E","F","G","A","B"];

Pourquoi ne pas avoir repris ce que je t'ai fourni, le résultat est le même mais l'écriture est moins claire, autant prendre tout de suite de bonne habitude.

•••

Code :

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

1
2
var titre = document.createElement('h1');
titre.innerHTML = "choisisez une note francaise"

cela ne suffit pas de créer un élément il faut le lier au DOM, ce que tu as fait pour l'élément <select>, donc

Code :

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

1
2
3
4
const docBody = document.body; // mise en cache pour utilisation ultérieure
const elemTitre = document.createElement("H1");
elemTitre.textContent = "Choisissez une note française"
docBody.appendChild(elemTitre);

•••

Bon j'ai repris tous le travail je pense être sur la bonne voie

Oui mais il faut créer/ajouter méthodiquement les différents éléments manipulés, on l'a dit c'est verbeux mais terriblement efficace et fiable :

création des éléments « conteneur », <form> et <select> ;
ajout des <option> au <select> ;
ajout du <select> au <form> ;
ajout du <form> au <body>.

•••

Code :

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

1
2
3
notesstd.forEach(function(element, index){
 
});

là tu ne t'ai pas forcé

Pour créer tes éléments <option>, tu as au moins deux méthodes, une avec new Option, regarde le lien il y a des exemples, et une avec createElement, je te laisse y jeter un œil !

**nagyp** · 07/07/2020, 19h10

Bonjour j'ai complétement revu mon programme (après avoir regarder les tuto de dyma.
toute fois j'ai un comportement assez bizarre. quand je saisie le code dans la console de l’explorateur j'ai le résultat attendu. mais quant je lance le programme j'ai ce message d'erreur: Uncaught TypeError: myParent is null.
Le body de mon HTML est vide seulement un <body ID="app">

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
// tableau std
const notesstd = [" ", "do","ré","mi","fa","sol","la","si"];
const notesus = ["pas de choix","C","D","E","F","G","A","B"];
const paragraphe = document.createElement('p');
const paragrapheClass = document.createElement('class');
const paragrapheText1 = document.createTextNode('choisissez une note française');
const paragrapheText2 = document.createTextNode('Équivalent en note Américaine');
const selectList = document.createElement("select");
 
let myParent = document.body;
selectList.id = "mySelect";
myParent.appendChild(selectList);
 
 
//Create and append the options
for (var i = 0; i < notesstd.length; i++) {
    let option = document.createElement("option");
    option.value = notesstd[i];
    option.text = notesstd[i];
    selectList.appendChild(option);
}

Je suis preneuse de toutes aides.