配列からのユニークなランダムな項目

Question

JavaScriptでは、配列から項目をランダムに削除し、ボタンのクリックでHTML内に表示したいと思います。 次に、ボタンをクリックすると、次に削除されたアイテムがアレイから表示されます。しかし、これは動作していないようです！

フィドル：http://jsfiddle.net/bs4e5g69/

document.getElementById("Button").onclick = function() { 
    var count = 3; 
    var myArray = [ 
    'A', 
    'B', 
    'C', 
    'D', 
    'E', 
    'F', 
    'G' 
    ]; 
    var tmpArrayE = myArray.slice(myArray); 
    var goE = []; 

    for (var i = 0; i < count; i++) { 
    var optionsE = Math.floor(Math.random() * tmpArrayE.length); 
    var removedE = tmpArrayE.splice(optionsE, 1); 

    goE.push(removedE[0]); 
    } 
    document.getElementById("Answer").innerHTML = goE[0]; 
} 

Answer 1

あなたの配列をイベントハンドラで再定義しているので、あなたの配列は決して空ではありません！

// myArray initial content, as a global variable : 
    var myArray = [ 
    'A', 
    'B', 
    'C', 
    'D', 
    'E', 
    'F', 
    'G' 
    ]; 

    // the event handler, randomly emptying myArray one at a time : 
    document.getElementById("Button").onclick = function() { 
    // check for an empty array : 
    if (myArray.length > 0) { 
     var optionsE = Math.floor(Math.random() * myArray.length); 
     var removedE = myArray.splice(optionsE, 1); 
     document.getElementById("Answer").innerHTML = removedE[0]; 
    } else { 
     alert("the array is now empty"); 
    } 
} 

Updated JSFiddle

Answer 2

あなたはonclickの関数内myArrayを宣言しています。クリックごとに新しい配列が作成されます。

var myArray = [ 
 
    'A', 
 
    'B', 
 
    'C', 
 
    'D', 
 
    'E', 
 
    'F', 
 
    'G' 
 
]; 
 
document.getElementById("Button").onclick = function() { 
 
    //check if myArray length is greater than 0 
 
    if (myArray.length > 0) { 
 
    // generate random number 
 
    var optionsE = Math.floor(Math.random() * myArray.length); 
 
    // remove that element & show in div 
 
    var removedE = myArray.splice(optionsE, 1); 
 
    document.getElementById("Answer").innerHTML = removedE; 
 
    } 
 

 
}

<button id="Button"> 
 
    Start 
 
</button> 
 
<div id="Answer"> 
 
    Result 
 
</div>

Answer 3

あなたがmyArrayのコピーを使用したい場合は、常にすべてのイベントのための（新しい）コピーを取得するので、あなたは、コールバックの外にこの行を移動する必要があります。

var tmpArrayE = myArray.slice(0); // myArray.slice(myArray) is wrong. 

元の配列をコールバックで使用する場合は、myArrayを使用します。

Answer 4

プランA：配列をシャッフルすることから始めます。ここ

あなたの更新されたコードです。次に、最後の要素を必要に応じてポップします。

プランB：0からlen-1までのランダム要素を選択します。最後の要素をそのスロットにコピーします。次に配列を1つ短くします。

あなたは「シャッフル」機能が必要な場合は、これを行う（のみNのステップを、結果はランダムです）：

for j = 0..N-1 
    swap item #j with item # rand(0..N-1)