Iterating through images one time and capturing the mouse coordinates for every click made by the user

Question

Iterating through images one time and capturing the mouse coordinates for every click made by the user

I have the following code snippet that displays a series of images and I would like to capture the coordinates of each mouse click on these images. Is there a way to send these coordinates to my email at the end of the image loop? Any assistance in achieving this functionality would be greatly appreciated.

Below is the script I'm currently using:

<head>
    <title>Practice2</title>
    <link type="text/css" rel="Stylesheet" href="MemStyle.CSS">
    <script type = "text/javascript">        
       var x=0;
       function changeImage() 
       {
if (x == images.length){
return;      
}

          document.getElementById("img").src=images[x]
          x++;
       }


      var images =  ["S2b.jpg", "S3b.jpg", "S4b.jpg", "S5b.jpg", "S1b.jpg"];       

    </script>
</head>
<body>
    <div id="MemImg">
       <button onclick="changeImage()" >
           <img id="img"  width="700px" height="700px" >
       </button>   
     </div>
</body>

javascript loops

Answer 1

Answer №1

Here is a solution for you to try:

let index = 1;
function switchImage() 
{
    if (index > pictures.length)
    {
        return;
    }

    document.getElementById("photo").src = pictures[index];
    index++;
}

Also, as suggested by @johnsmith, you can initialize the array of images like this:

const pictures = ["pic2.jpg", "pic3.jpg", "pic4.jpg", "pic5.jpg", "pic1.jpg"];

Update your index variable to start at 0:

let index = 0;

And adjust the condition accordingly:

if (index == pictures.length)

If you want to reset the counter, follow @janedoe's advice and change return; to index = 0.

Answer 2

Here is a solution for you to try:

let index = 1;
function switchImage() 
{
    if (index > pictures.length)
    {
        return;
    }

    document.getElementById("photo").src = pictures[index];
    index++;
}

Also, as suggested by @johnsmith, you can initialize the array of images like this:

const pictures = ["pic2.jpg", "pic3.jpg", "pic4.jpg", "pic5.jpg", "pic1.jpg"];

Update your index variable to start at 0:

let index = 0;

And adjust the condition accordingly:

if (index == pictures.length)

If you want to reset the counter, follow @janedoe's advice and change return; to index = 0.

Iterating through images one time and capturing the mouse coordinates for every click made by the user

Answer №1

Similar questions

What is the best way to have a variable adjust each time a coin is inserted until it reaches a specific value?

Obtain the sender using an href JavaScript code

What is the best way to handle waiting for an API call in JavaScript export?

What is the best way to adjust the size of a canvas and then upload the resized information to a

Passing data from an Express middleware to a Jade template

Facing issues with building Angular 7 and Ionic 4 - getting error message "TypeError: Cannot read properties of undefined (reading 'kind')"

Guide on extracting JSON data from specific nodes using d3.js

Identify Numerous Unique HTML-5 Attributes within a Single Page - Adobe DTM

Obtain a null value for the hidden field in ASP from a JavaScript parameter

The function 'ShouldWorkController' was expected but is not defined, receiving undefined instead

Adjusting the color of the legend on a LineChart in ExtJS 4 on-the-fly

The function forEach is unable to handle the process of uploading multiple images to cloudinary

Does Transclude eliminate tr and td elements from the content?

If you're not utilizing v-model.lazy, Vue3 Cleave js may encounter functionality issues

What steps should I follow to bring in an animated SVG file into Next.js 13 without losing transparency and animation effects?

Choose All Box for Dynamic Tables in AngularJS

Is there a way to retrieve a different value within the JavaScript code (imagepicker)?

Exploration of features through leaflet interaction

Tips for dynamically modifying style mode in Vue.js

Undo a CSS transition when clicked