I am trying to get X/Y coordinates from a div with a mouseclick.

I allready use this script:

Now I want to collect more X/Y coordinates, not just one. so if I click in the div twice or more times, I want to list the coordinates under the div.

<div>"click"
"click"</div>
------------------------
coordinates 1: X/Y
coordinates 2: X/Y
.
.
.

Does anyone know how I do that?

I am trying to get X/Y coordinates from a div with a mouseclick.

I allready use this script:

Now I want to collect more X/Y coordinates, not just one. so if I click in the div twice or more times, I want to list the coordinates under the div.

<div>"click"
"click"</div>
------------------------
coordinates 1: X/Y
coordinates 2: X/Y
.
.
.

Does anyone know how I do that?

• javascript
• jquery
• coordinates

• 1 We don't use .bind() since jQuery 1.7, use .on() instead. – Jonny Sooter Commented Mar 21, 2013 at 14:45
• How do you want to limit it? Do you want the count to start over and delete the previous ones? Or do you want it to update the last one and leave the rest? Or just stop posting at the limit? – Jonny Sooter Commented Mar 21, 2013 at 16:03
• just stop posting at a limit. i.e. limit = 5, so just 5 coordinates will shown up. a function to delete a coordinate and set the limit up again would be cool too. – paul Commented Mar 21, 2013 at 16:11
• Delete a coord? Which coord? A specific one, the first one, the last one, a random one, or one the user chooses? – Jonny Sooter Commented Mar 21, 2013 at 16:27
• one the user chooses. – paul Commented Mar 21, 2013 at 16:32

4 Answers 4

Here's exactly what you asked for.

Fiddle: http://jsfiddle/ZZEk8/118/

Add to HTML:

<span class="log"></span>

JS:

var clicks = [],
    updatedClicks = "";
$('.clickable').on('click', function (ev) { //We don't use .bind() after jQuery 1.7, use .on() now.
    var $div = $(ev.target);
    var $display = $div.find('.display');

    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;

    $display.text('x: ' + x + ', y: ' + y);
    clicks.push(x + "/" + y);

    updatedClicks += "coordinates" + " " + clicks.length + ":" + " " + clicks[clicks.length -1] + "<br />";

    $('.log').html(updatedClicks);
});

UPDATE: OP requested a way to limit the coords and delete one.

Fiddle: http://jsfiddle/ZZEk8/125/

var clicks = [],
    updatedClicks = [],
    limit = 5;

$('.clickable').on('click', function (ev) {
    var $div = $(ev.target);
    var $display = $div.find('.display');

    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;

    $display.text('x: ' + x + ', y: ' + y);

    //Stops adding at limit
    if (clicks.length < limit){
        addCoord(x,y);
    }
});

$('.delete').on('change', function(ev) {
    if(clicks.length){
        var selection = this.value -1;
        deleteCoord(selection);
    } else { //If there are no coords to delete run this
        return false;
    }
});

function addCoord (x,y){
    clicks.push(x + "/" + y);

    updatedClicks.push("Coordinates" + ":" + " " + clicks[clicks.length -1] + "<br />");

    $('.log').html(updatedClicks.join(" "));
}

function deleteCoord(selection) {
    clicks.splice(selection, 1);
    updatedClicks.splice(selection, 1);
    $('.log').html(updatedClicks.join(" "));
}

Add a new element <div id="log"></div> after your existing element.

In your JavaScript code add

document.getElementById("log").innerHTML += "<br/>Coordinates: X=" + x + "; Y=" + y;

In your jsfiddle example:

$display.html($display.html() + '<br/> x: ' + x + ', y: ' + y);

I do it using div elements, but you can change it.
See fiddle

My JS change is

 $display.append($('<div />').text('x: ' + x + ', y: ' + y));

And in HTML

<div class='clickable'>
    <div class='display'></div> 
</div>

Or this one, with a srollbar when needed.

If you want to save coordinates, you can collect them in an array, like this:

//Declare an array with 0 length
var arr = new Array(0);
$('.clickable').bind('click', function (ev) {
var $div = $(ev.target);
var $display = $div.find('.display');

var offset = $div.offset();
var x = ev.clientX - offset.left;
var y = ev.clientY - offset.top;

$display.text('x: ' + x + ', y: ' + y);
//increase the length of array before insert the value of coords
arr.length = arr.length+1;
//insert the value
arr[arr.length-1] = "coordinates" + arr.length + ":" + x +"/" + y;
});

Then, to operate coordinates you can tour your array with for-loop