See my code snipped I've an html list and function window.onload = shuffleNodes; that display automatically a shuffle list. How to add a button function to display the original list order? Thank you very much!!!
var list = document.getElementById("something"),
button = document.getElementById("shuffle");
function shuffle(items)
{
var cached = items.slice(0), temp, i = cached.length, rand;
while(--i)
{
rand = Math.floor(i * Math.random());
temp = cached[rand];
cached[rand] = cached[i];
cached[i] = temp;
}
return cached;
}
function shuffleNodes()
{
var nodes = list.children, i = 0;
nodes = Array.prototype.slice.call(nodes);
nodes = shuffle(nodes);
while(i < nodes.length)
{
list.appendChild(nodes[i]);
++i;
}
}
window.onload = shuffleNodes;<dl id="something">
<dd>one</dd>
<dd>two</dd>
<dd>three</dd>
<dd>four</dd>
<dd>five</dd>
<dd>six</dd>
<dd>seven</dd>
<dd>eight</dd>
<dd>nine</dd>
<dd>ten</dd>
</dl>
<hr>
<button onclick="myFunction()">ORDINATE LIST</button>I'd suggest storing a list of the nodes in an orderedNodes array, then shuffling before we display initially.
We can then display the ordered list easily again, or shuffle it again, using either of the two buttons.
const orderedNodes = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
function shuffle(items) {
var cached = items.slice(0), temp, i = cached.length, rand;
while(--i) {
rand = Math.floor(i * Math.random());
temp = cached[rand];
cached[rand] = cached[i];
cached[i] = temp;
}
return cached;
}
function displayShuffled() {
displayNodes(shuffle(orderedNodes));
}
function displayOrdered() {
displayNodes(orderedNodes)
}
function displayNodes(nodes) {
clearNodes();
nodes.forEach(displayNode);
}
function clearNodes() {
const list = document.getElementById("something");
list.innerHTML = '';
}
function displayNode(nodeText) {
const list = document.getElementById("something");
const el = document.createElement("dd");
el.appendChild(document.createTextNode(nodeText));
list.appendChild(el);
}
window.onload = displayShuffled;<dl id="something">
</dl>
<hr>
<button onclick="displayOrdered()">Order List</button>
<button onclick="displayShuffled()">Shuffle List</button>A short trick would be to store the innerHTML of element before shuffling, and revert to that HTML upon clicking the button.
var list = document.getElementById("something"),
button = document.getElementById("shuffle");
let original = list.innerHTML;
function shuffle(items) {
var cached = items.slice(0),
temp, i = cached.length,
rand;
while (--i) {
rand = Math.floor(i * Math.random());
temp = cached[rand];
cached[rand] = cached[i];
cached[i] = temp;
}
return cached;
}
function myFunction(){
list.innerHTML = original;
}
function shuffleNodes() {
var nodes = list.children,
i = 0;
nodes = Array.prototype.slice.call(nodes);
nodes = shuffle(nodes);
while (i < nodes.length){
list.appendChild(nodes[i]);
++i;
}
}
window.onload = shuffleNodes;<dl id="something">
<dd>one</dd>
<dd>two</dd>
<dd>three</dd>
<dd>four</dd>
<dd>five</dd>
<dd>six</dd>
<dd>seven</dd>
<dd>eight</dd>
<dd>nine</dd>
<dd>ten</dd>
</dl>
<hr>
<button onclick="myFunction()">ORDINATE LIST</button>