随机获取n个元素数组，并将其插入指定的元素中

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
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B00ARFNQ54&asin=B00ARFNQ54&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_wpdGxbH9ZAXX9&hideShare=true" ></iframe>',
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B00AFH1TBC&asin=B00AFH1TBC&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_5udGxbAPXN07Q&hideShare=true" ></iframe>',
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B005GSYZRA&asin=B005GSYZRA&preview=inline&linkCode=kpe&ref_=cm_sw_r_kb_dp_FxdGxbYXKDM2P&hideShare=true" ></iframe>',
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B00ARFNQ54&asin=B00ARFNQ54&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_wpdGxbH9ZAXX9&hideShare=true" ></iframe>',
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B00AFH1TBC&asin=B00AFH1TBC&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_5udGxbAPXN07Q&hideShare=true" ></iframe>',
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B005GSYZRA&asin=B005GSYZRA&preview=inline&linkCode=kpe&ref_=cm_sw_r_kb_dp_FxdGxbYXKDM2P&hideShare=true" ></iframe>'

   ];    

   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

<p class="center bookFrame">

<!-- Insert books here -->

</p>

Answer 1

There are multiple errors in this code.

First, the alert( randomBooks(arr, 3)); // Checking alert( randomBooks(arr, 3)); // Checking appears to be inside the function randomBooks itself, so clearly it will never be called..

Secondly, you can't do insertDiv.innerHTML(returnedValue); as 'innerHTML' is a string, not a function. And the return value of getElementsByClassName is a list and not a single element, so it should have been something like:

insertDiv[0].innerHTML = returnedValue;

There might be more errors, it looks like this code never really ran, so I suggest you start executing it and see how it goes first.

Just a tip: for testing purposes, instead of adding random calls and alerts to the code you could use the developer console (in chrome its F12, go to the console tab and just call randomBooks() from there to see what it returns).

Answer 2

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 = '<iframe type="text/html" frameborder="0" allowfullscreen src="https://read.amazon.com/kp/card?asin=' + bookId + '&asin=' + bookId + '&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_wpdGxbH9ZAXX9&hideShare=true" ></iframe>'; 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%; } 

 <p class="center bookFrame"><!-- Insert books here --></p>