当显示Using Javascript-Vanilla Javascript时,使段落随机



我有3个段落,使用Javascript,我已经尽可能多次地点击按钮后复制了这个段落。

我需要在每次按下按钮时将复制的段落随机化。

注意:我只需要添加Js代码,使段落以随机顺序出现。你所看到的是段落显示正确。我需要它随机出现。

这是我的代码。

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>

我们可以获取段落并将其存储在数组中,然后对其进行混洗并将其添加回html

下面的代码注释中有更多详细信息

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>

最新更新