javascript - 获取随机的 n 个元素数组并将它们插入到指定元素中

Question

我有一个嵌入框架元素的书籍列表。我想归还其中三本书并将它们插入到我已经定义的 div 中。我正在尝试使用随机播放方法，但有些事情不太顺利，因为我无法显示或随机化元素。

下面的代码是我正在尝试使用的示例。

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

此代码中有多个错误。

首先，alert( randomBooks(arr, 3));//检查 似乎是在函数 randomBooks 本身内部，所以显然它永远不会被调用..

其次，您不能执行 insertDiv.innerHTML(returnedValue); 因为 'innerHTML' 是一个字符串，而不是一个函数。 getElementsByClassName 的返回值是一个列表而不是单个元素，所以它应该是这样的:

insertDiv[0].innerHTML = returnedValue;

可能会有更多错误，看起来这段代码从未真正运行过，所以我建议你开始执行它，看看它是如何运行的。

只是一个提示:出于测试目的，您可以使用开发人员控制台(在 Chrome 中为 F12，转到控制台选项卡，然后从那里调用 randomBooks() 来查看它的内容，而不是向代码添加随机调用和警报)返回)。