I have 3 paragraphs, using Javascript I have made the paragraph replicate once I hit a button as many times as possible.
I need the replicated paragraphs to be randomized at every hit of the button.
NOTE: I only need to add the Js code that makes the paragraph appear in randomized order. What you see is that the paragraphs appear correctly. I need it to appear randomly.
Here is my code.
const element = document.getElementsByTagName("p");
function myFunction() {
document.getElementById("demo").innerHTML += element[0].innerHTML + "<br>" + "<br>" + element[1].innerHTML + "<br>" + "<hr>" + element[2].innerHTML + "<br>" + "<br>";
}<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, world</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros</p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia <a href="https://www.bigcabal.com">odio sem nec elit. Sed posuere</a> consectetur est at lbrt. Maecenas faucibus mollis interdum. <img src="test.jpeg" width="300" height="auto"> bibendum nulla sed consectetur. Praesent <code><b>commodo cursus magna, vel scelerisque nisl consectetur et.</b></code></p>
<p id="demo"></p>
<p id="demo"></p>
<p id="demo"></p>
<button onclick="myFunction()">Hit me</button>We can get the paragraphs and store then in an array then shuffle them and add them back to the html
there are more details in the code comments below
var pElements = [];
document.querySelectorAll("p").forEach(
p => { pElements.push(p.innerHTML);
});
function shuffle(array) {
let currentIndex = array.length, randomIndex;
// While there remain elements to shuffle...
while (currentIndex != 0) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]];
}
return array;
}
function myFunction() {
var shuffledArray = shuffle(pElements);
var newDiv = "<div class='pOrder'";
for(var i = 0; i < shuffledArray.length; i++){
newDiv += "<p>" + shuffledArray[i] + "</p>";
}
newDiv += "</div><br><br>";
document.getElementById("content").innerHTML += newDiv;
}<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros
</p>
<p>
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</p>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia <a href="https://www.bigcabal.com">odio sem nec elit. Sed posuere</a> consectetur est at lbrt. Maecenas faucibus mollis interdum. <img src="test.jpeg" width="300" height="auto" /> bibendum nulla sed consectetur. Praesent <code><b>commodo cursus magna, vel scelerisque nisl consectetur et.</b></code>
</p>
<br>
<br>
<div id="content">
</div>
<button onclick="myFunction()">Hit me</button>