select shuffled elements from html list

Question

I have a list of 10 items. I want to show only 3 random elements from the list: ONE element between 1 and 5.......TWO elements between 6 and 10. who can help me in this? thank you very much! my code now shows all the elements together... I would like to show something like: 3. 7. 9.
(only 3 elements)

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>

Gass · Answer 1 · 2022-02-04T11:55:20.423

1

I think it is better to work with arrays in this case. You can create an items array and then another array to store all the random indexes. Finally use the random indexes RI to get the random items to insert into the 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>

edited Feb 04 '22 at 11:55

answered Feb 04 '22 at 09:42

Gass

7,536
3
37
41

rand will generate the same number, in that case, it's not really random as you're just multiplying something on a fixed number. – I am L Feb 04 '22 at 10:55
thanks, your code works fine. but for various reasons, I need to make it work on an html list and not on an array.... – Antonio Tito Feb 04 '22 at 11:01
1

@IamL Well I'm multiplying and summing numbers to a random number, which will do the work, but it could be improved, you are right in that sense. I changed `rand` to `rand()` is just to make the code nicer.. – Gass Feb 04 '22 at 11:07
@AntonioTito Well then just destructure the HTML node into the items array. – Gass Feb 04 '22 at 11:09
I can't on my own! I need some help.... – Antonio Tito Feb 04 '22 at 11:19
@AntonioTito I updated the code, check it out – Gass Feb 04 '22 at 11:55

score 0 · Answer 2 · answered Feb 04 '22 at 11:03

First, you need a function that will generate a random number between 2 random numbers, this answer was taken here.

function randomIntFromInterval(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min)
}

and then what you need to do on your shuffleNodes is (comments on code):


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);
    })
}

select shuffled elements from html list

2 Answers2