JavaScript getElementsByClassName: replace take radom 5 of 10 and shuffle

Question

I have:

<div class="parent">
  <div class="myItem">Item 1</div>
  <div class="myItem">Item 2</div>
  <div class="myItem">Item 3</div>
  <div class="myItem">Item ...</div>
  <div class="myItem">Item 10</div>
</div>

I want:

<div class="parent">
  <div class="myItem">Item 7</div>
  <div class="myItem">Item 4</div>
  <div class="myItem">Item 5</div>
  <div class="myItem">Item 9</div>
  <div class="myItem">Item 2</div>
</div>

I would like to replace a certain amount (for example 5 of 10) items. And the replaced items shuold be in a new, random order. In pure JavaScript. Whats the best way to do this?

Make an array of random numbers. Loop through the DIVs, and assign the corresponding element of the array to the text of the DIV. — Barmar, Sep 01 '20 at 07:53

score 1 · Answer 1 · answered Sep 01 '20 at 08:21

A working solution, that doesn't need .getElementsByClassName and instead just works on the .parent element (and it's children property):

function scrambleChilds(parentEl, childCount) {
  var childs = Array.from(parentEl.children), // get all children
      random = [], // new children
      index;
      
  while (childs.length) { // while there are children...
    index = Math.floor(Math.random() * childs.length); // ... make a random index ...
    random.push(childs.splice(index, 1)[0]); // ... and save a random child into the new children
  }
  
  parentEl.innerHTML = ''; // make sure parent element is empty
  random.slice(0, childCount || Infinity).forEach(child => { // grab first N and...
    parentEl.appendChild(child); // ...append each to parent
  });
}



scrambleChilds(document.querySelector('.parent'), 5);

<div class="parent">
  <div class="myItem">Item 1</div>
  <div class="myItem">Item 2</div>
  <div class="myItem">Item 3</div>
  <div class="myItem">Item 4</div>
  <div class="myItem">Item 5</div>
  <div class="myItem">Item 6</div>
  <div class="myItem">Item 7</div>
  <div class="myItem">Item 8</div>
  <div class="myItem">Item 9</div>
  <div class="myItem">Item 10</div>
</div>

The Array.from( items ) returns an Array object from any object. With this you can use the array methods like push() or slice(). This helped me a lot, thanks! — Stefan Vogt, Sep 01 '20 at 14:48

score 0 · Answer 2 · answered Sep 01 '20 at 08:20

I hope this helps:

const shuffleArray = array => {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
  
  return array;
}


const [parent] = document.getElementsByClassName('parent');
const items = [...document.getElementsByClassName('myItem')];
const shuffledArray = shuffleArray(items);

parent.innerHTML = '';
const elementsAmount = 5; 

for(let i = 0; i < elementsAmount; i++){
  parent.appendChild(shuffledArray[i]);
}

<div class="parent">
  <div class="myItem">Item 1</div>
  <div class="myItem">Item 2</div>
  <div class="myItem">Item 3</div>
  <div class="myItem">Item 4</div>
  <div class="myItem">Item 5</div>
  <div class="myItem">Item 6</div>
  <div class="myItem">Item 7</div>
  <div class="myItem">Item 8</div>
  <div class="myItem">Item 9</div>
  <div class="myItem">Item 10</div>
</div>

JavaScript getElementsByClassName: replace take radom 5 of 10 and shuffle

2 Answers2