18050 sujets

Questions générales et questions de débutants

[Résolu] Script.js saut de ligne dans une variable quotes = [" (pas de

Bonjour. (Je ne suis pas familière avec les forums)
Je suis vraiment débutante (et âgée ha ha ha)
J'ai trouvé une programmation qui me permet d'afficher des phrases aléatoires à partir d'un HTML. Le code va bien après quelques réflexions et adaptations je cherche à faire un SAUT de ligne dans une variable pour que le nom du créateur de la citation soit après la phrase, en dessous.

Par exemple et simplifié, une phrase:
La beauté inspire toujours la béatitude de l’âme. Serge Bouchard
je voudrais ceci:
La beauté inspire toujours la béatitude de l’âme. (sur retour de ligne...)
Serge Bouchard

Je ne trouve pas...
Le code utilisé (que je n'ai pas créé vient d'un site codePen. Le script.js donne ceci et fonctionne (en abrégé) mais pas possible de trouver un saut de ligne

var quotes = ["La mort n’est pas la plus grande perte dans la vie. La plus grande perte est ce qui meurt en nous pendant que nous vivons. Norman Cousins",
"Les larmes les plus amers que l’on verse sur les tombes viennent des mots que l’on n’a pas dit les chose que l’on a pas faites. Hariette Nielchestos",
"La beauté inspire toujours la béatitude de l’âme. Serge Bouchard",
"Le temps est assassin et emporte avec lui les rires des enfants. Renaud",
"Croire aux mystères vaut mieux que de pleurer pour rien. Serge Bouchard",
"Orbes des mots, murmurante mémoire. Henri Capien"
];
etc. etc.
function getQuote() {
var randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("parag").innerHTML="<em>" + randomQuote + "</em>";
}



Si vous pouviez juste m'aiguiller à quelque part ou une résolution. Merci. (Excusez mon texte un peu long)

Yully
Bonjour Yully et bienvenue sur ce forum ! Smiley smile

Je vois deux solutions à ton problème.

La solution rapide : ajouter une balise <br> dans chacune de tes citations
La balise HTML <br> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br) représente un saut ligne. Puisque dans ta fonction getQuote, tu utilises innerHTML, tout le contenu est interprété comme du code source. L'inclusion de la balise <br> déclenchera donc un saut de ligne. Exemple :
var quotes = [
    "La beauté inspire toujours la béatitude de l’âme.<br>Serge Bouchard",
    // ...
]


La solution plus élégante : structurer les données
Pour le moment, ton tableau ne contient qu'une liste chaînes de caractères. Chaque chaîne contient la citation et son auteur, sans pour autant que l'on puisse les discerner l'un de l'autre.
Ue piste d'amélioration, serait de mieux structurer ces données afin de pouvoir les afficher de la manière que l'on souhaite. On peut faire ça en JavaScript à l'aide l'objets (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object). Exemple :
var quotes = [
    { quote: "La beauté inspire toujours la béatitude de l’âme", author: "Serge Bouchard" },
    // ...
]

Ainsi, le tableau contient une liste d'objet qui sont chacun formés de deux éléments : la citation et son auteur. Ensuite, on peut adapter le HTML qui va accueillir la citation, en identifiants les éléments que l'on va remplir avec le texte de la citation et son auteur. Exemple :
<p class="citation-parag">
    <em id="citation"></em><br>
    <span id="author"></span>
</p>

Cet exemple de structure HTML te permettrai d'appliquer des styles en CSS différents à la citation et à son auteur.

Enfin, il reste à adapter la fonction getQuote pour insérer les données du tableau dans les bons éléments HTML :
function getQuote() {
    // ...
    document.getElementById("citation").textContent = randomQuote.quote;
    document.getElementById("author").textContent = randomQuote.author;
}

On notera ici l'utilisation de la propriété textContent au lieu de innerHTML pour insérer du texte dans le DOM. C'est une bonne pratique d'utiliser cette propriété car cela évite que le text inséré ne soit interprété comme du code HTML (https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent).
Modifié par GuillaumeBauer (22 Dec 2024 - 15:12)
Meilleure solution
Oh wow, je n'y avais vraiment pas pensé. Je m'y applique dans la journée et demain, et après demain. Je suis un ti-vieux qui apprend comme hobby Merci beaucoup. Smiley cligne
Prévenir un modérateur
Répondre au sujet
Aller à