関数はランダムに動作しません

Question

プログラムは配列から最初の番号を削除し、2番目の番号を確認し、リンクされている画像を表示します。コードは、ランダムにそれはそうでもない再び答えを

var deck = [1, 2, 3, 4, 5, 6, 7, 8]; 
 

 
function myFunction() { 
 
    deck.sort(function(a, b) { 
 
    return 0.5 - Math.random() 
 
    }); 
 
    deck.shift(); 
 

 
    if (deck[0] == "1") { 
 
    document.getElementById("img").src = "https://pbs.twimg.com/profile_images/2478399688/6gyep59fumb340ima588_400x400.png"; 
 
    } else if (deck[0] == "2") { 
 
    document.getElementById("img").src = "http://www.printablee.com/postpic/2014/08/number-2-printable-coloring-pages_244062.jpg"; 
 
    } else if (deck[0] == "3") { 
 
    document.getElementById("img").src = "http://blogs.abc.net.au/.a/6a00e0097e4e688833017eeb4172f2970d-800wi"; 
 
    } else if (deck[0] == "4") { 
 
    document.getElementById("img").src = "http://www.clipartkid.com/images/309/blog-numbers-just-numbers-page-2-9bq8wQ-clipart.jpg"; 
 
    } else if (deck[0] == "5") { 
 
    document.getElementById("img").src = "https://static1.squarespace.com/static/527cff9fe4b0dc36171a857c/52b21af3e4b07a50584fa6f2/553bd231e4b0bfb591495953/1429983793686/5.png?format=750w"; 
 
    } else if (deck[0] == "6") { 
 
    document.getElementById("img").src = "http://www.drodd.com/images15/6-6.jpg"; 
 
    } else if (deck[0] == "7") { 
 
    document.getElementById("img").src = "http://www.drodd.com/images15/number7-5.jpg"; 
 
    } else if (deck[0] == "8") { 
 
    document.getElementById("img").src = "https://i.ytimg.com/vi/d2fkzKP2A3M/maxresdefault.jpg"; 
 
    } 
 
}

<button onclick="myFunction()">Try it</button> 
 
<img src="" id="img" />

Answer 1

作業を開始カップルを押した後、ボタンの押しに取り組んで停止しますが、多分あなたは便利なこれらの事のいくつかを見つけるでしょう。

• あなたは、配列を再生成しようとしている場合を除き、あなただけシフトしないURLの代わりに、インデックス
• を使用することができます1つのランダムソートが
• 十分である、配列を頼る必要はありません。 （）を使うと、最初の画像を使用する前に永遠に失われます。
• たぶん、あなたは繰り返しelse ifを使用して、フォームと機能
• 避けの分離を維持するためにコードをクリックハンドラを追加する方がいいでしょう
• に合わせて画像のサイズを変更し、switch文がより効果的である - またはあなたが使用することができますデータ構造自体
• src=''はsrc='//:0'が明らかにより良い代替手段である、一部のブラウザでは違法である

blank = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="; 
 
deck = [ "https://pbs.twimg.com/profile_images/2478399688/6gyep59fumb340ima588_400x400.png" 
 
     , "http://www.printablee.com/postpic/2014/08/number-2-printable-coloring-pages_244062.jpg" 
 
     , "http://blogs.abc.net.au/.a/6a00e0097e4e688833017eeb4172f2970d-800wi" 
 
     , "http://www.clipartkid.com/images/309/blog-numbers-just-numbers-page-2-9bq8wQ-clipart.jpg" 
 
     , "https://static1.squarespace.com/static/527cff9fe4b0dc36171a857c/52b21af3e4b07a50584fa6f2/553bd231e4b0bfb591495953/1429983793686/5.png?format=750w" 
 
     , "http://www.drodd.com/images15/6-6.jpg" 
 
     , "http://www.drodd.com/images15/number7-5.jpg" 
 
     , "https://i.ytimg.com/vi/d2fkzKP2A3M/maxresdefault.jpg" 
 
     ].sort(() => 0.5 - Math.random()); 
 

 
function myFunction() { document.getElementById("img").src = deck.length? deck.shift() : blank; } 
 

 
document.addEventListener("DOMContentLoaded", function() { 
 
    document.getElementById("button").addEventListener("click", myFunction, false); 
 
    document.getElementById("img").src = blank; 
 
} 
 
, false);

<button id="button">Try it</button><br /> 
 
<img src="//:0" width="50" height="50" id="img" />