Storing the clicked mouse coordinates in an array using JavaScript

Question

Storing the clicked mouse coordinates in an array using JavaScript

I want to add the coordinates of a mouse click on a specific element to the end of an array. Below is my code snippet:

IN THE HEAD:

var seatsArray = [];

IN THE BODY:

var coordinates = document.getElementById("image");
coordinates.onclick = function(event) {
  seatsArray.push(offsetX, offsetY);
}
document.write("Seats array now includes: " + seatsArray + ".");

Seems like a simple issue, but I'm still new to javascript. Any guidance on why it's not functioning would be highly appreciated!

Thanks

javascript arrays onclick getelementbyid

Answer 1

Answer №1

Make a simple change to your click event like this:

coordinates.onclick = function(event) {
  event = event || window.event;
  if (!window.event) { // for Firefox
    event.offsetX = event.layerX;
        event.offsetY = event.layerY;
  } 
  seatsArray.push(event.offsetX, event.offsetY);
}

Firefox uses offsetX/Y as layerX/Y, while IE has a global event object.

If you want global coordinates, use this method:

coordinates.onclick = function(e) {
e = e || window.event;

if (e && e.pageX && e.pageY) {
            e.posX = e.pageX;
            e.posY = e.pageY;

        } else if (e && e.clientX && e.clientY) {
            var scr     = {x:0,y:0},
                object  = e.srcElement || e.target;
            //calculating scroll
            for (;object.parentNode;object = object.parentNode) {
                scr['x'] += object.scrollLeft;
                scr['y'] += object.scrollTop;
            } 
            e.posX = e.clientX + scr.x;
            e.posY = e.clientY + scr.y;
        } 
 seatsArray.push(e.posX, e.posY);
}

Answer 2

Make a simple change to your click event like this:

coordinates.onclick = function(event) {
  event = event || window.event;
  if (!window.event) { // for Firefox
    event.offsetX = event.layerX;
        event.offsetY = event.layerY;
  } 
  seatsArray.push(event.offsetX, event.offsetY);
}

Firefox uses offsetX/Y as layerX/Y, while IE has a global event object.

If you want global coordinates, use this method:

coordinates.onclick = function(e) {
e = e || window.event;

if (e && e.pageX && e.pageY) {
            e.posX = e.pageX;
            e.posY = e.pageY;

        } else if (e && e.clientX && e.clientY) {
            var scr     = {x:0,y:0},
                object  = e.srcElement || e.target;
            //calculating scroll
            for (;object.parentNode;object = object.parentNode) {
                scr['x'] += object.scrollLeft;
                scr['y'] += object.scrollTop;
            } 
            e.posX = e.clientX + scr.x;
            e.posY = e.clientY + scr.y;
        } 
 seatsArray.push(e.posX, e.posY);
}

Storing the clicked mouse coordinates in an array using JavaScript

Answer №1

Similar questions

Attempting to send data as arguments in an axios request

The JavaScript image slideshow functions perfectly when run from a local environment, however, it encounters

Combining an array of intricate data models to create

Display the array values in Node.js on new linesorNode.js: Display array values

The function executes without issue initially but then consistently encounters errors

Utilizing OpenLayers3 to create a global JavaScript variable

Error in Javascript: unable to locate the imported module

Creating a Customized Pop-up Box with Bootstrap CSS and JQuery/Java Integration

What is the best way to initiate a saga for an API request while another call is currently in progress?

Troubleshooting: Issue with Nested jQuery UI Accordion Implementation

What is the best way to swap out the outdated schemas for the updated ones?

Regular expressions should be utilized in a way that they do not match exactly with a

Utilizing Fragments in Vuejs 2.x with Jsx - A User's Guide

Personalize the file button for uploading images

Disabling the Annoying Video Popup Ad that's Blocking my "Load More" Feature in Selenium

Exploring the Concept of Event Bubbling in ReactJS

What is the best way to enable horizontal scrolling for textarea overflow in a smooth manner like input, without any sudden jumps?

How can I rearrange divs using CSS? Can I add parent 1 in between the children of parent 2

What is the best way to reset local state after triggering a success action in Redux Saga?

Update the 'duplicate' buttons according to the position in the array