2

I have a few <div> elements in my HTML page that I've converted into a javascript array.

I've randomized the array and now I need to print it back on the page. How can I do that?
Here's the code

let fields = document.getElementsByClassName('col-md-2') let fieldsArr = Array.from(fields); let randFields = fieldsArr.sort(function() { return 0.5 - Math.random() });
<div class="row"> <div class="col-md-2" id="1">1</div> <div class="col-md-2" id="2">2</div> <div class="col-md-2" id="3">3</div> <div class="col-md-2" id="4">4</div> <div class="col-md-2" id="5">5</div> <div class="col-md-2" id="6">6</div> <div class="col-md-2" id="7">7</div> <div class="col-md-2" id="8">8</div> <div class="col-md-2" id="9">9</div> <div class="col-md-2" id="10">10</div> <div class="col-md-2" id="11">11</div> <div class="col-md-2" id="12">12</div> <div class="col-md-2" id="13">13</div> <div class="col-md-2" id="14">14</div> <div class="col-md-2" id="15">15</div> <div class="col-md-2" id="16">16</div> <div class="col-md-2" id="17">17</div> <div class="col-md-2" id="18">18</div> <div class="col-md-2" id="19">19</div> <div class="col-md-2" id="20">20</div> <div class="col-md-2" id="21">21</div> <div class="col-md-2" id="22">22</div> <div class="col-md-2" id="23">23</div> <div class="col-md-2" id="24">24</div> </div>

Displaying randFields on the page, gives me back 24 [object HTMLDivElement].

Improve this question
8
  • 1
    Displaying how? Commented May 17, 2018 at 12:24
  • You can't print directly an item from your HTMLCollection. Use appendChild(); Commented May 17, 2018 at 12:26
  • I have another div with an id of " show". I've tried doing this: document.getElementById('show').innerHTML = randFields Commented May 17, 2018 at 12:27
  • I've tried the appendChild method and it just gives me back an error: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. Commented May 17, 2018 at 12:28
  • So you want to keep the original elements and show also them in a new order? Commented May 17, 2018 at 12:28

3 Answers 3

Reset to default
3

To show the randomly re-ordered divs in the DOM you need to call appendChild() on their parent and pass the element reference as an argument. You can achieve that in a forEach() loop over the array resulting from the sort() call, like this:

let row = document.querySelector('.row'); let fields = document.getElementsByClassName('col-md-2') let fieldsArr = Array.from(fields); fieldsArr.sort(function() { return 0.5 - Math.random(); }).forEach(function(el) { row.appendChild(el); });
<div class="row"> <div class="col-md-2" id="1">1</div> <div class="col-md-2" id="2">2</div> <div class="col-md-2" id="3">3</div> <div class="col-md-2" id="4">4</div> <div class="col-md-2" id="5">5</div> <div class="col-md-2" id="6">6</div> <div class="col-md-2" id="7">7</div> <div class="col-md-2" id="8">8</div> <div class="col-md-2" id="9">9</div> <div class="col-md-2" id="10">10</div> <div class="col-md-2" id="11">11</div> <div class="col-md-2" id="12">12</div> <div class="col-md-2" id="13">13</div> <div class="col-md-2" id="14">14</div> <div class="col-md-2" id="15">15</div> <div class="col-md-2" id="16">16</div> <div class="col-md-2" id="17">17</div> <div class="col-md-2" id="18">18</div> <div class="col-md-2" id="19">19</div> <div class="col-md-2" id="20">20</div> <div class="col-md-2" id="21">21</div> <div class="col-md-2" id="22">22</div> <div class="col-md-2" id="23">23</div> <div class="col-md-2" id="24">24</div> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

You're a life saver! Thanks mate! :)
No problem, glad to help
1 

let fields = document.getElementsByClassName('col-md-2') let fieldsArr = Array.from(fields); let randFields = fieldsArr.sort(function() { return 0.5 - Math.random() }); html = ''; for(i in randFields){ html += randFields[i].outerHTML; } document.getElementsByClassName('row')[0].outerHTML = html
<div class="row"> <div class="col-md-2" id="1">1</div> <div class="col-md-2" id="2">2</div> <div class="col-md-2" id="3">3</div> <div class="col-md-2" id="4">4</div> <div class="col-md-2" id="5">5</div> <div class="col-md-2" id="6">6</div> <div class="col-md-2" id="7">7</div> <div class="col-md-2" id="8">8</div> <div class="col-md-2" id="9">9</div> <div class="col-md-2" id="10">10</div> <div class="col-md-2" id="11">11</div> <div class="col-md-2" id="12">12</div> <div class="col-md-2" id="13">13</div> <div class="col-md-2" id="14">14</div> <div class="col-md-2" id="15">15</div> <div class="col-md-2" id="16">16</div> <div class="col-md-2" id="17">17</div> <div class="col-md-2" id="18">18</div> <div class="col-md-2" id="19">19</div> <div class="col-md-2" id="20">20</div> <div class="col-md-2" id="21">21</div> <div class="col-md-2" id="22">22</div> <div class="col-md-2" id="23">23</div> <div class="col-md-2" id="24">24</div> </div> And JavaScript:

Improve this answer

Comments

1

Once you have an array of your divs randomized, I will just print each of them one by one to elem with class of .row

let container = document.getElementsByClassName('row')[0].innerHTML = ''; randFields.forEach( elem => { container.innerHTML += elem; });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.