Ver mi código cortado. Tengo una lista html y una función window.onload = shuffleNodes; que muestran automáticamente una lista aleatoria. ¿Cómo agregar una función de botón para mostrar el orden de la lista original? ¡¡¡Muchísimas gracias!!!
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>Sugeriría almacenar una lista de los nodos en una matriz de nodos orderedNodes y luego barajar antes de mostrar inicialmente.
Luego podemos volver a mostrar fácilmente la lista ordenada, o barajarla nuevamente, usando cualquiera de los dos botones.
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>Un pequeño truco sería almacenar el HTML innerHTML del elemento antes de barajar y volver a ese HTML al hacer clic en el botón.
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>