Tengo una lista de 10 artículos. Quiero mostrar solo 3 elementos aleatorios de la lista: UN elemento entre 1 y 5....... DOS elementos entre 6 y 10. ¿Quién me puede ayudar en esto? ¡Muchas gracias! mi código ahora muestra todos los elementos juntos... Me gustaría mostrar algo como: 3. 7. 9.
(solo 3 elementos)
var list = document.getElementById("items"), newlist = 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; <form id="something"> <div class="classname"> <dl id="items"> <dd>1. item.<br></dd> <dd>2. item.<br></dd> <dd>3. item.<br></dd> <dd>4. item.<br></dd> <dd>5. item.<br></dd> <dd>6. item.<br></dd> <dd>7. item.<br></dd> <dd>8. item.<br></dd> <dd>9. item.<br></dd> <dd>10. item.<br></dd> </dl> </div> </form>Creo que es mejor trabajar con arreglos en este caso. Puede crear una matriz de elementos y luego otra matriz para almacenar todos los índices aleatorios. Finalmente, use los índices aleatorios RI para obtener los elementos aleatorios para insertarlos en el HTML.
function execute(){ const list = document.getElementById("list") const rand = () => {return Math.random()} // Destructure the list childrens inside an array const items = [...list.children]; // Erase the list list.innerHTML = '' // `RI` stands for random index const RI = [ Math.round(rand() * 4), // Rand between 0 and 4 5 + Math.round(rand()), // Rand between 5 and 6 7 + Math.round(rand() * 2) // Rand between 7 and 9 ] // Append html list items list.append(items[RI[0]]) list.append(items[RI[1]]) list.append(items[RI[2]]) // Remove the button document.getElementById('btn').remove() } <button id='btn' onClick='execute()'>Get random list</button> <ul id='list'> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> </ul>Primero, necesita una función que genere un número aleatorio entre 2 números aleatorios, esta respuesta se tomó aquí .
function randomIntFromInterval(min, max) { // min and max included return Math.floor(Math.random() * (max - min + 1) + min) } y luego lo que debe hacer en sus shuffleNodes es (comentarios sobre el código):
function shuffleNodes() { var nodes = list.children; // generate 3 random numbers first based on what you want, this will be your indexes var first = randomIntFromInterval(1, 5); var second = randomIntFromInterval(6, 10); var third = randomIntFromInterval(6, 10); [first, second, third].map((val) => { // add that index on the node so you can select it var randomList = nodes[val]; // do your logic here list.appendChild(randomList); }) }