Question

I’m working on a function to get selected point coordinations of image and save it to variables. What I need is to select two points and then execute other functions.
This code below is working fine for getting points coordinates, but execute this function only for two points? Thanks for advice.

$(".bg_image").click(function(e) {
                    var offset = $(this).offset();
                    var relativeX = (e.pageX - offset.left);
                    var relativeY = (e.pageY - offset.top);

                    $('<div>', {
                        'class':'point',
                        'css': {
                            'position': 'absolute',
                            'left':     relativeX +'px',
                            'top':      relativeY +'px',
                            'width':    '3px',
                            'height':   '3px',
                            'background-color': '#fff'
                        }
                    })
                    .appendTo('#output');
                    console.log("X: " + relativeX + "  Y: " + relativeY);

                });

Answer 1

You need to create a variable that counts how many clicks the user perfomed on the image.

var count = 0;

$(".bg_image").click(function(e) {
  count++;
  if ( count <= 2 )
  {
    //execute your code
  }
});