Take a random n number array of elements and insert them in a specified element

Question

I have a list of books that are embedded frame elements. I'm wanting to return three of those books and insert them into a div I've already defined. I'm trying to utilize the shuffle method, but something isn't going right as I can't get the elements to display or randomize.

The code below is the example I'm trying to work with.

Javascript

   function randomBooks(arr, count) {

   var arr = [ // list of books
   '',
   '',
   '',
   '',
   '',
   ''

   ];    

   var insertDiv = document.getElementsByClassName("bookFrame"); // Div I want elements inserted

   var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
   while (i-- > min) {
       index = Math.floor((i + 1) * Math.random());
       temp = shuffled[index];
       shuffled[index] = shuffled[i];
       shuffled[i] = temp;
   }

   var returnedValue= shuffled.slice(min, 3);
   insertDiv.innerHTML(returnedValue); // inject 3 random book elements

   alert( randomBooks(arr, 3)); // Checking 

   };

HTML

JonSG · Accepted Answer

Things might not have been working for a few reasons. There were a bunch of little errors in the code.

Your randomBooks() method accepts an argument arr, but you then overwrote it with your own. I think you might have wanted to pass in the array of books into your randomizer so I did that in my example.

Secondly, getElementsByClassName() returns an array. You might want to take the first element of it or switch to querySelector() if you know that you want the first of selector found.

Finally, el.innerHTML is directly assigned to. You have used it more like how jQuery's $el.html() method works.

function addBooks(target, bookIds, count) {
  // -----------------------------
  // A classic array shuffler (inplace).
  // -----------------------------
  function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
    return array;
  }
  // -----------------------------

  // -----------------------------
  // Get 3 random books.
  // -----------------------------
  shuffleArray(bookIds);
  var selected = bookIds.slice(0, 3);
  // -----------------------------
  
  // -----------------------------
  // Construct some HTML for the 3 books.
  // -----------------------------
  var html = selected.map(function(bookId){
    var retval = '';
    return retval;
  });
  // -----------------------------

  // -----------------------------
  // inject 3 random book elements
  // -----------------------------
  document.querySelector(target).innerHTML = html;
  // -----------------------------
};

var bookIds = [
  'B00ARFNQ54',
  'B00AFH1TBC',
  'B005GSYZRA',
  'B00ARFNQ54',
  'B00AFH1TBC',
  'B005GSYZRA'
];

addBooks(".bookFrame", bookIds, 3);

iframe { width: 150px; height: 200px; max-width:100%; }

Take a random n number array of elements and insert them in a specified element

Answers (2)

Related Questions