Trouble with onclick attribute for img when used in combination with setInterval

Question

I am trying to make images that move around the screen that do something when they are clicked. I am using setInterval to call a function to move the images. Each image has the onclick attribute set. The problem is that the clicks are not registering.

If I take out the setInterval and just keep the images still, then the clicks do register.

My code is here (html, css, JavaScript): https://jsfiddle.net/contini/nLc404x7/4/

The JavaScript is copied here:

var smiley_screen_params = {
  smiley_size : 100,  // needs to agree with width/height from css file
  num_smilies: 20
}

var smiley = {
  top_position : 0,
  left_position : 0,
  jump_speed : 2,
  h_direction : 1,
  v_direction : 1,
  intvl_speed : 10,    // advance smiley every x milliseconds
  id : "smiley"
}

function randomise_direction(s) {
  var hd = parseInt(Math.random()*2);
  var vd = parseInt(Math.random()*2);
  if (hd === 0)
    s.h_direction = -1;
  if (vd === 0)
    s.v_direction = -1;
}

function plotSmiley(sp /* sp = smiley params */) {
  var existing_smiley = document.getElementById(sp.id);
  if (existing_smiley !== null)
    // delete existing smiley so we can move it
    document.getElementById("smileybox").removeChild(existing_smiley);
  var smiley_to_plot = document.createElement('img');
  smiley_to_plot.setAttribute('src', "http://i.imgur.com/C0BiXJx.png");
  smiley_to_plot.setAttribute('id', sp.id);
  smiley_to_plot.setAttribute('onclick', "my_click_count()");
  smiley_to_plot.style.position = 'absolute';
  smiley_to_plot.style.top = sp.top_position + "px";
  smiley_to_plot.style.left = sp.left_position + "px";
  document.getElementById("smileybox").appendChild(smiley_to_plot);
}

function random_direction_change() {
  var r = parseInt(Math.random()*200);
  if (r===0)
    return true;
  else
    return false;
}

function moveFace(sp_array /* sp_array = smiley params array */) {
  var i;
  var sp;

  for (i=0; i < sp_array.length; ++i) {
    // move ith element
    sp = sp_array[i];
    if (
      (sp.h_direction > 0 && sp.left_position >= smiley_screen_params.width - smiley_screen_params.smiley_size) ||
      (sp.h_direction < 0 && sp.left_position <= 0) ||
      (random_direction_change())
    ) {
      sp.h_direction = -sp.h_direction;  // hit left/right, bounce off (or random direction change)
    }
    if (
      (sp.v_direction > 0 && sp.top_position >= smiley_screen_params.height - smiley_screen_params.smiley_size) ||
      (sp.v_direction < 0 && sp.top_position <= 0) ||
      (random_direction_change())
    ) {
      sp.v_direction = -sp.v_direction;  // hit top/bottom, bounce off (or random direction change)
    }

    sp.top_position += sp.v_direction * sp.jump_speed;
    sp.left_position += sp.h_direction * sp.jump_speed;
    plotSmiley(sp);
  }
}

if (typeof Object.create !== 'function') {
    Object.create = function(o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    };
}

function generateFaces() {
  var smilies = new Array();
  var s;
  var i;
  var css_smileybox=document.getElementById("smileybox");
  var sb_style = getComputedStyle(css_smileybox, null);

  // add info to the screen params
  smiley_screen_params.width = parseInt(sb_style.width);
  smiley_screen_params.height = parseInt(sb_style.height);

  // create the smileys
  for (i=0; i < smiley_screen_params.num_smilies; ++i) {
    s = Object.create(smiley);
    s.id = "smiley" + i;
    s.top_position = parseInt(Math.random() * (smiley_screen_params.height - smiley_screen_params.smiley_size)),
    s.left_position = parseInt(Math.random() * (smiley_screen_params.width - smiley_screen_params.smiley_size)),
    randomise_direction(s);
    smilies.push(s);
  }
  setInterval( function(){ moveFace(smilies) }, smiley.intvl_speed );
}

var click_count=0;
function my_click_count() {
  ++click_count;
  document.getElementById("mg").innerHTML = "Number of clicks: " + click_count;
}

generateFaces();

The generateFaces() will generate parameters (for example, coordinates of where they are placed) for a bunch of smiley face images. The setInterval is within this function, and calls the moveFace function to make the smiley faces move at a fixed interval of time. moveFace computes the new coordinates of each smiley face image and then calls plotSmiley to plot each one on the screen in its new location (removing it from the old location). The plotSmiley sets the onclick attribute of each image to call a dummy function just to see if the clicks are registering.

Thanks in advance.

Answer 1

This is not a complete answer but it could give you some perspective to improve your code.

First of all, your idea of deleting the existing img so wrong. If it does exist, all you need is to just change its position so instead of this

if (existing_smiley !== null)
  // delete existing smiley so we can move it
  document.getElementById("smileybox").removeChild(existing_smiley);

you should do something like this:

if (existing_smiley !== null)
  var smiley_to_plot = existing_smiley;
else {
  var smiley_to_plot = document.createElement('img');
  smiley_to_plot.setAttribute('src', "http://i.imgur.com/C0BiXJx.png");
  smiley_to_plot.setAttribute('id', sp.id);
  smiley_to_plot.style.position = 'absolute';
  document.getElementById("smileybox").appendChild(smiley_to_plot);
  smiley_to_plot.addEventListener('click', my_click_count);
}
smiley_to_plot.style.top = sp.top_position + "px";
smiley_to_plot.style.left = sp.left_position + "px";

As you can see new image is only being added if it's not already there. Also notice that adding events by using .setAttribute('onclick', "my_click_count()"); is not a good way to do. You should use .addEventListener('click', my_click_count); like I did.

Like I said this is not a complete answer but at least this way they response to the click events now.

FIDDLE UPDATE

Good luck!