Tengo 3 párrafos, usando Javascript he hecho que el párrafo se replique una vez que presiono un botón tantas veces como sea posible.
Necesito que los párrafos replicados se aleatoricen con cada pulsación del botón.
NOTA: Solo necesito agregar el código Js que hace que el párrafo aparezca en orden aleatorio. Lo que ves es que los párrafos aparecen correctamente. Necesito que aparezca aleatoriamente.
Aquí está mi código.
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>Podemos obtener los párrafos y almacenarlos en una matriz, luego mezclarlos y agregarlos nuevamente al html
hay más detalles en los comentarios del código a continuación
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>