Discussion :

[moimp]

Bonjour à tous,
Je souhaite afficher des erreurs en insérant un retour à la ligne entre chaque erreur.
J'ai d'abord essayé avec les deux lignes en commentaire qui affiche les <br/>au milieu du texte.
J'ai alors écrit le code suivant qui affiche tout à la suite:

Code js :

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
const textes = [
	document.createTextNode(""),
	document.createTextNode(fromPHPtoJS.alerts.pseudo[0]), // Ce pseudo existe déjà, cherchez en un autre.
	document.createTextNode(fromPHPtoJS.alerts.pseudo[1]),  // Le pseudo ne peut pas commencer par un chiffre.
	document.createElement('br')
];
 
// Suite du code...
 
	if (errors.length >0)
	{
		errorsDiv.style.backgroundColor = '#FFFF99';
		errorsDiv.style.color = 'red';
		errorsDiv.style.padding = '3px 5px';
		//let strErrors = errors.join('<br/>');
		//errorsDiv.appendChild( document.createTextNode(strErrors) );
		console.log(textes[3]);
		for (let i=0, max=errors.length; i<max; i++)
		{
			errorsDiv.appendChild( document.createTextNode(errors[i]) );
			errorsDiv.appendChild( textes[3] );
		}
		e.preventDefault();
	}
	else {
		errorsDiv.style.backgroundColor = 'transparent';
		errorsDiv.appendChild( textes[0] );
	}

La ligne 17 affiche "<br></br>".

[Invité]

Bonjour,

Code :

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

"\n"

[Beginner.]

Salut,

Ah oui c'est intéressant ça... En utilisant le débogueur on voit mieux ce qui se passe...
En fait ton code fonctionne au début mais...

Le problème vient de là errorsDiv.appendChild( textes[3] );... Tu crois que tu ajoutes à chaque tour de boucle une nouvelle balise <br> mais non : textes[3] contient la référence d'un élément br, il n'y en a qu'un seul...

1- Ainsi tu écris la première erreur puis tu ajoutes à la suite l’élément br, là c'est ok
2- Tu écris la deuxième erreur, elle va bien à la ligne suivante
3- puis de nouveau tu ajoutes à la suite l’élément br mais ce n'est pas un nouvel élément br, c'est le br que tu as ajouté après la première erreur ---> il va donc être déplacé pour se retrouver après la deuxième erreur...

Et ainsi de suite, à la fin il n'y a qu'un seul br qui se retrouve à la fin de toutes les erreurs affichées...

Je ne sais pas si j'ai été clair mais bon une solution serait juste de remplacer errorsDiv.appendChild( textes[3] ); par errorsDiv.appendChild(document.createElement('br'));...

J'ai écrit un petit code voici un lien pour le tester : https://jsbin.com/nugehicexu/1/edit?html,js,output

[moimp]

Le code de Beginner. fonctionne.
Celui de jreaux62 ne fonctionne pas le "\n" n'est pas vu par le navigateur, tout comme les "\t" ou autres.

Après test et en vue d'améliorer l'esthétique, j'ai finalement choisi une autre solution en remplaçant les balises br par des balises p en modifiant toutefois le style par défaut des balises p, ce qui donne le code suivant:

Code js :

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
	if (errors.length >0)
	{
		errorsDiv.style.backgroundColor = '#FFFF99';
		errorsDiv.style.color = 'red';
		errorsDiv.style.padding = '3px 5px';
		for (let i=0, max=errors.length; i<max; i++)
		{
			let 
				errorTxt	= document.createTextNode( errors[i] ),
				p			= document.createElement( 'p' );
			p.style.margin = '.3rem';
			errorsDiv.appendChild( p );
			p.appendChild( errorTxt );
		}
		e.preventDefault();
	}
	else {
		errorsDiv.style.backgroundColor = 'transparent';
		errorsDiv.appendChild( textes[0] );
	}

[Beginner.]

J'ai juste voulu corriger ton code mais c'est vrai que j'avais aussi pensé aux paragraphes..

Celui de jreaux62 ne fonctionne pas le "\n" n'est pas vu par le navigateur, tout comme les "\t" ou autres.

Oui c'est normal ce n'est pas une balise, c'est un saut de ligne qu'on peut insérer dans une string, alors pour qu'on puisse voir ces sauts de ligne il faut ajouter un CSS spéciale ou par exemple utiliser une balise <pre>...

[Invité]

Bonjour,

comme tu ne donnes pas beaucoup d'explications,... j'avais mal compris.

"\n" permet de faire des sauts de lignes :

• dans un message d'alerte JS : alert(...)
• dans la console : console.log(...)
• ou dans le code source généré (pour "aérer" le code et/ou passer à la ligne entre les groupes de balises)

Dans ton cas, je ne sais pas trop ce que tu cherches à faire, vu qu'on ne peut pas tester.

[moimp]

Merci pour vos commentaires.