Add click event listeners to SVG bitmap images

Question

I am trying to add click event listeners to different SVG bitmap images. Each click event should execute a different function.

Here is my JS code:

<script>
var stage;
var images = [];
function init() {
  stage = new createjs.Stage("kort");

  addImage("/assets/images/kort.png", 0.65, 0.65, 0, 0);
  addImage("/assets/images/kirke.png", 0.25, 0.25, 250, 250);
  addImage("/assets/images/mølle.png", 0.4, 0.4, 335, 100);
  addImage("/assets/images/skib.png", 0.25, 0.25, 30, 375);
  addImage("/assets/images/hestesko.png", 0.3, 0.3, 100, 75);

  console.log("Images added")
  addClickEvents();

  function addImage(url, scaleX, scaleY, locX, locY) {
    var image = new Image();
    image.src = url;
    image.onload = function () { //indsæt kun billede når det er loadet
      var imageBitmap = new createjs.Bitmap(image);
      imageBitmap.x = locX;
      imageBitmap.y = locY;
      imageBitmap.scaleX = scaleX;
      imageBitmap.scaleY = scaleY;
      images.push(imageBitmap);
      console.log("Image pushed to array");

      stage.addChild(imageBitmap);
      stage.update();
    } 
  }
  function addClickEvents() {
      images[1].on("mousedown", function (evt) {
            this.alpha = 0.1;
            stage.update();
            set(0, true);
        });
    }
}

When i run this code i receive a an error:

Uncaught TypeError: Cannot read property 'on' of undefined
at addClickEvents ((index):52)
at init ((index):33)
at onload ((index):9)"

It seems to run the addClickEvents() function before adding the images, so the array is empty and so it tries to add an event to undefined.

Answer 1

Possible Solution

It seems to run the addClickEvents() function before adding the images, so the array is empty and so it tries to add an event to undefined.

Correct I belive.

You will need a bit of a rework, javascript's asynchronous nature requires you to do this job a little differently.

Have a look at the function addImage(url, sx, sy, x, y); , a possible solution will be to create a separate array imagesLoaded, to actually track when you should call the addClickEvents() function.

New Global Array:

var imagesLoaded = new Array();
imagesLoaded.push({
    src: "/assets/images/kort.png",
    loaded: false
});

Logic Check

We do the check within the onload events of your images:

image.onload = function () { //indsæt kun billede når det er loadet
    /*
        ALL YOUR CODE AS IS
    */
    stage.update();
    //NEW CODE
    for (i = 0; i < imagesLoaded.length; i++)        
    {
        if (imagesLoaded[i].src == image.src)
            imagesLoaded[i].loaded = true;
    }
    var allLoaded = true;
    for (i = 0; i < imagesLoaded.length; i++)        
    {
        if (!imagesLoaded[i].loaded)
            allLoaded = false;
    }
    if (allLoaded)
    {
        addClickEvents();
    }
    //END OF NEW CODE
} 

Hope it helps you. Comment questions if any.

PS: Obviously this solution is an add-on to your current predicament. It would do you well to perhaps implement this sort of principle to your own array variable and thereby minimize some excess code.