Discussion :

[avenged59]

Bonjour � tous,

Voila mon petit soucis, je suis en train de faire un formulaire en HTML/CSS(bootstrap) et j'aimerais que dans ce formulaire la personne qui le remplit rentre un nombre de semaines et en fonction du nombre rentr� en dessous il s'affiche "semaine 1", "semaine 2" etc les uns en dessous des autres et que la personne puisse �crire des pr�cisions pour chacune des semaines.

je vois pas trop comment �crire ma fonction et l'appliquer avec un onkeydown="maFonction()" par exemple.

voici mon

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
<!-- ici ou la personne entrera le nombre de semaine-->
	<div class="row">
		<div class="col-xl-6">
			<h5>Nombres de semaines: </h5>  
			<input type="text" class="form-control semaines" name="nombre" id="nombre" required>
		</div>
		<div class="col-xl-6">
		<h5>Compétences mobilisées</h5>
		</div>
	</div>
	<!--  ici que je voudrais que les semaines apparaissent avec un champs pour que la personne puisse écrire-->
	<div class="row">
		<div class="col-xl-6">
		<input id="semaine" class="form-control" aria-label="With textarea" required>
			</input> 
		</div>
		<div class="col-xl-6">
		<textarea class="form-control" aria-label="With textarea"></textarea> 
		</div>
	</div>

J'esp�re avoir �t� clair et merci d'avance pour vos r�ponse

[Watilin]

Pr�f�re onkeyup � onkeydown, la diff�rence se remarque quand on garde une touche de clavier enfonc�e. Tu peux aussi utiliser l��v�nement plus r�cent oninput.

Lorsque tu appelles une fonction depuis un attribut on*, ta fonction re�oit comme contexte this l��l�ment sur lequel l��v�nement a eu lieu.

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<input type="text" class="form-control semaines" name="nombre" id="nombre" required oninput="maFonction()" />

Code JS :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
function maFonction() {
  "use strict"; // voir https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode
 
  console.log(this); // affiche l’input dans la console
}

Pour le reste de ta question, il faut d�abord que tu nous donnes une information importante : utilises-tu jQuery ? Apr�s tout, jQuery n�est pas obligatoire avec Bootstrap, et tu n�as pas post� ta question dans le forum jQuery, donc le doute est permis.

Dans les grandes lignes, l�id�e est de :

1. r�cup�rer le nombre n saisi dans l�input ;
2. faire une boucle for avec n it�rations ;
3. � chaque it�ration, cr�er les �l�ments que tu veux ins�rer et les ajouter � un fragment de document ;
4. � la fin de la boucle, ins�rer le fragment � l�endroit voulu dans le DOM.

Voir MDN : DocumentFragment et jQuery : Append Outside of Loops.

[avenged59]

Non je n'utilise pas jQuery je pense que je devrais mieux maitriser Javascript avant de me pencher sur jQuery tu crois pas?

Du coup il est possible de faire une boucle comme tu as dis et de mettre a l'int�rieur des "document.createElement" etc pour cr�er mes �l�ments?
tu penses que ca serait plus simple a faire avec jQuery?

Merci pour tes conseils et tes pistes

[Watilin]

Non je n'utilise pas jQuery je pense que je devrais mieux maitriser Javascript avant de me pencher sur jQuery tu crois pas?

Oui

Du coup il est possible de faire une boucle comme tu as dis et de mettre a l'int�rieur des "document.createElement" etc pour cr�er mes �l�ments?

Oui ! Un truc comme �a :

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
function maFonction() {
  "use strict";
 
  // comme l’input est de type texte, on convertit explicitement la valeur
  // en nombre pour éviter les mauvaises surprises
  const n = parseInt(this.value, 10);
 
  const fragment = document.createDocumentFragment();
  for (let i = 1; i <= n; i++) {
    const p        = document.createElement("p");
    const textNode = document.createTextNode(`semaine ${i}`);
    const textarea = document.createElement("textarea");
 
    p.appendChild(textNode);
    p.appendChild(textarea);
    fragment.appendChild(p);
  }
  document.body.appendChild(fragment);
}

J�ai utilis� la syntaxe de cha�ne ``, pas de panique si tu ne la connais pas, c�est tr�s intuitif. Les parties entre ${} sont simplement remplac�es par leurs valeurs � l�ex�cution. `semaine ${i}` est �quivalent � "semaine " + i. Au cas o�, la doc : Litt�raux de gabarits.

Pour que l�exemple reste concis, j�ins�re une structure HTML tr�s simple :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
<p>
  Semaine 1
  <textarea></textarea>
</p>
...

Et le tout est ins�r� � la fin du <body>.

Bien entendu, en situation r�elle, tu veux pouvoir ins�rer � un endroit pr�cis, pour �a il faut trouver l�endroit � l�aide de getElementById() ou querySelector(), puis utiliser une m�thode d�insertion :

• appendChild() ;
• insertBefore() ;
• replaceWith().

Malheureusement, la tr�s pratique m�thode insertAdjacentElement() n�est pas compatible avec DocumentFragment. Garde-la sous le coude pour les cas o� tu as simplement besoin de faire une insertion ponctuelle

insertBefore(), qui fait partie du DOM niveau 1, est garantie compatible m�me sous les tr�s vieux navigateurs. Mais elle est un peu moins pratique car elle n�cessite un second argument. Par exemple, pour ins�rer au d�but du receveur, on �crit ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

receveur.insertBefore(fragment, receveur.firstChild);

replaceWith() n�est pas compatible avec IE (avant Edge), � toi de voir si tu choisis de supporter ce navigateur ou pas. Il y a �galement une version plus r�cente de appendChild(), append(), qui apporte des facilit�s mais qui n�est pas compatible avec Edge.

(Note : j�ai oubli� de v�rifier la compatibilit� de oninput dans mon message pr�c�dent. Si tu veux supporter Edge, utilise onkeyup � la place.)

Un mot � propos de innerHTML : on trouve cette propri�t� dans un grand nombre d�exemples de code, et tu en as sans doute d�j� entendu parler. � mon avis, rien n�a jamais justifi� son utilisation (� part peut-�tre la flemme), et j�explique pourquoi dans ce message. En dernier recours, il y a insertAdjacentHTML().

tu penses que ca serait plus simple a faire avec jQuery?

Pas plus simple, pas plus compliqu�, juste diff�rent.

[avenged59]

merci beaucoup pour toutes tes explications je vais prendre ton code et bosser pour bien le maitriser et tout comprendre et au passage jeter un oeil a jQuery lol