# mouseClicked to get mouseX and mouseY

**URL:** https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704
**Category:** Coding Questions
**Created:** [June 9, 2020, 2:43pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704 "2020-06-09T14:43:15Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Ciaran](https://avatars.discourse-cdn.com/v4/letter/c/c77e96/32.png) [@Ciaran](https://discourse.processing.org/u/Ciaran)
#### Post date: [June 9, 2020, 2:43pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704/1 "2020-06-09T14:43:15Z")

</div>

I want to be able to log the position of the mouse when it is clicked on the canvas, I can get it to work with mousePressed but the function mouseClicked() is not working can anyone point me in the right direction?

Code:

```auto
 function mouseClicked(){
            let clickx = mouseX;
            let clicky = mouseY;
            let i = null;
            let j = null;
            if(clicky>7&&clicky<52){
                i = 0;
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('[',i,'][',j,']');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }

```

The else if statement just continues below that but I didn’t want to create a huge post

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 9, 2020, 2:48pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704/2 "2020-06-09T14:48:05Z")

</div>

Hi,

Welcome to the forum! 🙂

If you look at the p5js documentation for the [mouseClicked()](https://p5js.org/reference/#/p5/mouseClicked) function, it says :

> The [mouseClicked()](https://p5js.org/reference/#/p5/mouseClicked) function is called once after a mouse button has been pressed and then released.
> 
> Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see [mousePressed()](https://p5js.org/reference/#/p5/mousePressed) or [mouseReleased()](https://p5js.org/reference/#/p5/mouseReleased).

So are you pressing your mouse then releasing it? Are you pressing the left mouse button?

---

<div class="post-metadata">

### Author: ![Ciaran](https://avatars.discourse-cdn.com/v4/letter/c/c77e96/32.png) [@Ciaran](https://discourse.processing.org/u/Ciaran)
#### Post date: [June 9, 2020, 2:50pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704/3 "2020-06-09T14:50:49Z")

</div>

Hi josephh,

Yeah I’m clicking and releasing the left mouse button but it doesn’t seem to be registering the clicks  
Would it be better if I put the entirety of my code?

---

<div class="post-metadata">

### Author: ![Ciaran](https://avatars.discourse-cdn.com/v4/letter/c/c77e96/32.png) [@Ciaran](https://discourse.processing.org/u/Ciaran)
#### Post date: [June 9, 2020, 2:52pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704/4 "2020-06-09T14:52:36Z")

</div>

```auto
<script type='application/javascript'>
    
    function preload(){
        img1 = loadImage("{{url_for('static', filename='images/svg/ambulance.svg')}}");
        img2 = loadImage("{{url_for('static', filename='images/svg/virus.svg')}}");
        img3 = loadImage("{{url_for('static', filename='images/svg/face-mask.svg')}}");
        img4 = loadImage("{{url_for('static', filename='images/svg/lungs.svg')}}");
        img5 = loadImage("{{url_for('static', filename='images/svg/vaccine.svg')}}");
        img6 = loadImage("{{url_for('static', filename='images/svg/skull.svg')}}");
        img7 = loadImage("{{url_for('static', filename='images/svg/cross.svg')}}");
       
    }
    function setup(){
    
        
       let cnv = createCanvas(600,600)
       cnv.id('canvas')
    }

    function draw(){  
        var x = 10;
        var y = 10;
        for(var i =0;i<array.length;i++){
            for(var j=0;j<array[i].length;j++){
                // console.log(array[i][j])
                if (array[i][j] == 1){
                    image(img1,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 2){
                    image(img2,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 3){
                    image(img3,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 4){
                    image(img4,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 5){
                    image(img5,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 6){
                    image(img6,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 7){
                    image(img7,x,y,30,30);
                    x+=45;
                }
                
            }
            y+=45;
            x=10;
        }

        
       
    function mouseClicked(){
            let clickx = mouseX;
            let clicky = mouseY;
            let i = null;
            let j = null;
            if(clicky>7&&clicky<52){
                i = 0;
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('[',i,'][',j,']');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>52&&clicky<97){
                i = 1;
                console.log('x = 1');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>97&&clicky<142){
                i = 2;
                console.log('x = 2');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>142&&clicky<187){
                i = 3;
                console.log('x = 3');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>187&&clicky<232){
                i = 4;
                console.log('x = 4');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>232&&clicky<277){
                i = 5;
                console.log('x = 5');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>277&&clicky<322){
                i = 6;
                console.log('x = 6');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>322&&clicky<367){
                i = 7;
                console.log('x = 7');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }

        }
    }
    
        
    </script>

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 9, 2020, 3:01pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704/5 "2020-06-09T15:01:20Z")

</div>

Ok the first thing that I notice is that there’s a lot of repetitions in your code 🤨

Most of the time, if you have so much if statements, it’s that your code is not optimized. The whole point of programming is not to repeat yourself, otherwise you can do it by hand.

I suppose that you are displaying images on a grid and you want to detect the location of the mouse on the grid when you click. If it’s what you want to do, we can figure out how to do it.

Next point (this is probably the problem) is that you are using a variable `array` that you never declared in your code. So accessing `array[i][j]` should give you an error.

---

<div class="post-metadata">

### Author: ![Ciaran](https://avatars.discourse-cdn.com/v4/letter/c/c77e96/32.png) [@Ciaran](https://discourse.processing.org/u/Ciaran)
#### Post date: [June 9, 2020, 3:08pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704/6 "2020-06-09T15:08:38Z")

</div>

Yeah, I’m pretty new to coding so optimising isn’t my strong point, sorry. Would it be better for me to write a function to check the mouseX and use it each time?

The array I have declared in the head of html code

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 9, 2020, 3:12pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704/7 "2020-06-09T15:12:02Z")

</div>

Yeah ok no problem, we’ve all been there once 🙂

I suggest you separate your JavaScript file(s) from your HTML file because it’s much more convenient to have separate files for debugging. So declare your global variables in the same file that your script.

Personally I never use `mouseClicked()` always `mousePressed()` because it does the same basically.

And if you think about it, all your if statements are just creating a loop through the length of the array and checking if the mouse is between a certaint column and row.

---

<div class="post-metadata">

### Author: ![Ciaran](https://avatars.discourse-cdn.com/v4/letter/c/c77e96/32.png) [@Ciaran](https://discourse.processing.org/u/Ciaran)
#### Post date: [June 9, 2020, 3:13pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704/8 "2020-06-09T15:13:46Z")

</div>

Yeah, my issue will be that I will want to use an AJAX call when the mouse is clicked so I’m worried that if I use mousePressed it will send multiple rather than just the one

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 9, 2020, 3:14pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704/9 "2020-06-09T15:14:57Z")

</div>

> [@Ciaran](#):
>
> if I use mousePressed it will send multiple rather than just the one

No it says :

> The [mousePressed()](https://p5js.org/reference/#/p5/mousePressed) function is called once after every time a mouse button is pressed.

---

<div class="post-metadata">

### Author: ![Ciaran](https://avatars.discourse-cdn.com/v4/letter/c/c77e96/32.png) [@Ciaran](https://discourse.processing.org/u/Ciaran)
#### Post date: [June 9, 2020, 3:46pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704/10 "2020-06-09T15:46:16Z")

</div>

Perfect, thanks for your help and sorry for the terrible code