ランダムなn個の要素の配列をとり、指定された要素に挿入します。

Question

埋め込みフレーム要素の書籍のリストがあります。私はそれらの本のうちの3つを返して、既に定義した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

いくつかの理由で状況がうまくいかなかった可能性があります。コードには少しの間違いがありました。

あなたのrandomBooks（）メソッドは引数arrを受け取りますが、あなた自身でそれを上書きしました。私はあなたのランダム化装置に本の配列を渡したかったかもしれないと思うので、私の例でそれをしました。

第2に、getElementsByClassName（）は配列を返します。最初のセレクタが必要な場合は、最初の要素を使用するか、querySelector（）に切り替えることができます。

最後にel.innerHTMLがに直接割り当てられます。 jQueryの$ el.html（）メソッドがどのように機能するか、もっと使いました。

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>

Answer 2

このコードで複数のエラーがあります。 「innerHTMLのは」文字列、関数ではなくて

まず、alert(randomBooks(arr, 3)); // Checkingはとてもはっきりそれが呼ばれることはありません、関数randomBooks自体の内部のように見える。..

第二に、あなたはinsertDiv.innerHTML(returnedValue);を行うことはできません。そして、のgetElementsByClassNameの戻り値がリストではなく単一の要素である、それはのようなものとなっている必要がありますので：

insertDiv[0].innerHTML = returnedValue; 

以上のエラーがあるかもしれません、それは、このコードのように見えるが、実際に走ったことがないので、私はあなたが開始示唆それを実行し、どのように最初に行くかを見てください。

ちょうどヒント：テストの目的で、コードにランダムな呼び出しとアラートを追加するのではなく、開発者コンソール（ChromeのF12でコンソールタブに移動してそこからrandomBooks（）を呼び出すだけでそれは戻る）。