How to shuffle lines of text in javascript?

Question

I'm trying to shuffle the verses of a poem so that every time the page reloads the lines are in a different order. I used a js code I found on txtfiddle but I can't seem to make it work on my page. This is the link: https://txtfiddle.com/~aolam6a/shuffle-lines I thought i just needed to call a variable "input" to make it work but that was not it. Any help? Thanks!

var input = document.getElementById("text").innerHTML;
// Split input text into an array of lines

const lines = input.split(/\r?\n/);

// Fisher–Yates shuffle to randomize the array
for (let i = lines.length - 1; i > 0; i--) {
  const j = Math.floor(Math.random() * (i + 1));
  [lines[i], lines[j]] = [lines[j], lines[i]];
}

// Join line array back into a string
return lines.join("\n");

<div id="text">

  Quand le ciel bas et lourd pèse comme un couvercle<br> Sur l'esprit gémissant en proie aux longs ennuis,<br> Et que de l'horizon embrassant tout le cercle<br> Il nous verse un jour noir plus triste que les nuits ;<br> Quand la terre est changée en un
  cachot humide,<br> Où l'Espérance, comme une chauve-souris,<br> S'en va battant les murs de son aile timide<br> Et se cognant la tête à des plafonds pourris ;<br> Quand la pluie étalant ses immenses traînées<br> D'une vaste prison imite les barreaux,<br>  Et qu'un peuple muet d'infâmes araignées<br> Vient tendre ses filets au fond de nos cerveaux,<br> Des cloches tout à coup sautent avec furie<br> Et lancent vers le ciel un affreux hurlement,<br> Ainsi que des esprits errants et sans patrie<br> Qui se
  mettent à geindre opiniâtrement.<br> - Et de longs corbillards, sans tambours ni musique,<br> Défilent lentement dans mon âme ; l'Espoir,<br> Vaincu, pleure, et l'Angoisse atroce, despotique,<br> Sur mon crâne incliné plante son drapeau noir.<br>
</div>

OP's issue is caused by the misunderstanding about the `return` statement, the difference between his txtfiddle and regular js. The marked duplicate does not answer OP's question. — 0stone0, Jun 07 '22 at 12:54

score -2 · Accepted Answer · answered Jun 07 '22 at 12:43

TxtFiddle uses the return statement to show the output in the browser.

However, when using plain Javascript, a return outside of a function scope is invalid.

You should set the lines.join("\n") as the content of the <div>:

element.innerHTML = lines.join("\n");

Demo:

var element = document.getElementById("text");
var input = element.innerHTML;
// Split input text into an array of lines

const lines = input.split(/\r?\n/);

// Fisher–Yates shuffle to randomize the array
for (let i = lines.length - 1; i > 0; i--) {
  const j = Math.floor(Math.random() * (i + 1));
  [lines[i], lines[j]] = [lines[j], lines[i]];
}

// Join line array back into a string
element.innerHTML = lines.join("\n");

<div id="text">

  Quand le ciel bas et lourd pèse comme un couvercle<br> Sur l'esprit gémissant en proie aux longs ennuis,<br> Et que de l'horizon embrassant tout le cercle<br> Il nous verse un jour noir plus triste que les nuits ;<br> Quand la terre est changée en un
  cachot humide,<br> Où l'Espérance, comme une chauve-souris,<br> S'en va battant les murs de son aile timide<br> Et se cognant la tête à des plafonds pourris ;<br> Quand la pluie étalant ses immenses traînées<br> D'une vaste prison imite les barreaux,<br>  Et qu'un peuple muet d'infâmes araignées<br> Vient tendre ses filets au fond de nos cerveaux,<br> Des cloches tout à coup sautent avec furie<br> Et lancent vers le ciel un affreux hurlement,<br> Ainsi que des esprits errants et sans patrie<br> Qui se
  mettent à geindre opiniâtrement.<br> - Et de longs corbillards, sans tambours ni musique,<br> Défilent lentement dans mon âme ; l'Espoir,<br> Vaincu, pleure, et l'Angoisse atroce, despotique,<br> Sur mon crâne incliné plante son drapeau noir.<br>
</div>

How to shuffle lines of text in javascript?

1 Answers1