DeadPixle DeadPixle - 22 days ago 6
HTML Question

function randomly doesn't work

the program is meant to remove the first number from the array and check if what the second is and display the image that is linked. the code randomly stops working on the button press then after couple press it starts working again



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

Not really an answer, but maybe you will find some of these things useful.

  • You don't need to resort the array, one random sort is enough
  • Unless you're going to regenerate the array, you can just use the URLs instead of indexes
  • Don't shift() before you use your first image, or it will get lost forever.
  • Maybe resize your images to fit
  • You're better off adding a click handler with code to preserve separation of form and function
  • Avoid using repeated else if, the switch statement is more effective - or you could use the data structure itself
  • src='' is illegal in some browsers, src='//:0' is apparently a better alternative

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" />

Comments