javascript - Modifying a simple jquery game -

i trying modify game, right shows 9 images @ random positions , user has click on them , when reaches 10 clicks game ends. want appear 1 image. share original function , function have modified it.

original

function createimages(){     var myarray= ["img/img1.gif","img/img2.gif","img/img3.png",                 "img/img4.gif","img/img5.gif","img/img6.gif",                 "img/img7.gif","img/img8.png", "img/img9.jpg"];     var count=0;     var div;     (var = 0; < 9; i++) {         var randpos = 0 + math.floor(math.random() * 500);          this.img = document.createelement("img");         div = document.createelement("div");          $("div").attr("id","div"+i);         var randnew = 0 + math.floor(math.random() * (5));          var rand = 0 + math.floor(math.random() * (9-count));          this.img.src = myarray[rand];          $('#div'+i).css("left", randposition());         $('#div'+i).css("right", randposition());         $('#div'+i).css("top", randposition());         $('#div'+i).css("bottom",randposition());         $('#div'+i).css("position","relative");         $('#div'+i).show();         div.appendchild(this.img);         $("body").prepend(div);         myarray.splice(rand,1);         count++;     } } 

after modified it

function createimages(){     var count=0;     var div;     (var = 0; < 9; i++) {         var randpos = 0 + math.floor(math.random() * 500);          this.img = document.createelement("img");         div = document.createelement("div");          $("div").attr("id","div");         var randnew = 0 + math.floor(math.random() * (5));          var rand = 0 + math.floor(math.random() * (9-count));          this.img.src = "img/img1.gif";          $('#div').css("left", randposition());         $('#div').css("right", randposition());         $('#div').css("top", randposition());         $('#div').css("bottom",randposition());         $('#div').css("position","relative");         $('#div').show();         div.appendchild(this.img);         $("body").prepend(div);         count++;     } } 

the problem appears same image 10 times, want appear once , disappear , appear again. can me fix issue.

if it's not ask put image inside div wouldn't appear on page.

function randposition() {     return 0 + math.floor(math.random() * 500); } 

in createimages() function have loop adds image 10 times:

for (var = 0; < 9; i++) {    ... } 

remove it, , it'll once. can simplify code removing random variables not used.

further, 2 sentences aren't correct. first 1 creates div in variable named div. second selector div elements, not referencing new created 1 think expect.

div = document.createelement("div"); $("div").attr("id","div"); 

you should create jquery object new created div work it:

var div = document.createelement("div");  $div = $(div);  // << create jquery object wrapping new div $div.css("left", randposition()); 

edited function:

function createimages(){     var div = document.createelement("div");      $div = $(div);     $div.css("left", randposition());     $div.css("right", randposition());     $div.css("top", randposition());     $div.css("bottom",randposition());     $div.css("position","relative");     $div.show();      var img = document.createelement("img");     img.src = "http://dummyimage.com/25x25/4f4/000.png";      div.appendchild(img);     $("body").prepend(div); } 

edit: i've built jsfiddle can play it: http://jsfiddle.net/6alh9qam/3/