# Overlaping clickable buttons

**URL:** https://discourse.processing.org/t/overlaping-clickable-buttons/31044
**Category:** Coding Questions
**Created:** [July 4, 2021, 1:41pm UTC](https://discourse.processing.org/t/overlaping-clickable-buttons/31044 "2021-07-04T13:41:44Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Kingjuleyann](https://avatars.discourse-cdn.com/v4/letter/k/f475e1/32.png) [@Kingjuleyann](https://discourse.processing.org/u/Kingjuleyann)
#### Post date: [July 4, 2021, 1:41pm UTC](https://discourse.processing.org/t/overlaping-clickable-buttons/31044/1 "2021-07-04T13:41:44Z")

</div>

hello world, I am currently making a game using processing but a have a bug I can’t solve: I have made a main menu that includes a clickable button leading to a submenu for single player game modes. when I click on the main menu’s button, it should lead me to the submenu where I can click on a second button to launch a game of the standard game mode. However because of my 2 buttons overlaping, when I click on the main menu’s button, it also clicks on the submenu’s button, launching the game without displaying the submenu. I would like to know how to solve the problem please.

here is the matching code:

```auto
void draw() { 
  
  if (mode==0) //main menu
  {
    menuDraw();
  }
  
  else if (mode==1)
  {
    soloDraw();
  }
}

void mousePressed()
{
  if (mode==0) //main menu
  {
    if (mouseX<=600 && mouseX>=50 && mouseY>=245 && mouseY<=295)
    {
      mode=1;
    } else if (mouseX<=985 && mouseX>=815 && mouseY>=245 && mouseY<=295)
    {
      mode=4;//crédits
    } else if (mouseX<=805 && mouseX>=595 && mouseY>=90 && mouseY<=235)
    {
      mode=3; //options
    } else if (mouseX<=805 && mouseX>=595 && mouseY>=300 && mouseY<=610)
    {
      mode=2; //multi W.I.P.
    }
  }
  
  if (mode==1 && mouseX<=490 && mouseX>=25 && mouseY>=25 && mouseY<=325)
  {
    mode=10; //standard
    viesJ1=viesJ1Init;
    viesJ2=viesJ2Init;
    viesJ3=viesJ3Init;
    viesJ4=viesJ4Init;
  }
}

void menuDraw()
{
  noStroke();
  textFont(papyrus);
  background(fondPrincipal);
  textSize(50);

  fill(255, 0, 0);
  text("Super", 150, 150);

  fill(0, 0, 255);
  text("Pong", 290, 150);

  fill(0, 255, 0);
  text("Bros", 410, 150);

  fill(255, 255, 0);
  text("Menu:", 290, 200);

  noFill();
  rect(50, 245, 550, 50);
  
  fill(0,255,0);
  textSize(100);
  text("solo", 230, 400);
  
  noFill();
  rect(815, 245, 135, 50);
  
  fill(255,255,0);
  textSize(50);
  text("credits", 830, 350);
  
  noFill();
  rect(595, 90, 210, 145);
  
  fill(255,0,0);
  textSize(35);
  text("options", 830, 210);
  
  noFill();
  rect(595, 300, 210, 310);
  
  fill(0,0,255);
  textSize(100);
  text("m", 515,350);
  text("u", 525,400);
  text("l", 550,490);
  text("t", 540,550);
  text("i", 550,620);
}

void soloDraw(){
  background(0);
  fill(0,0,255);
  rect(25,25, 465, 300);
    
  fill(0);
  textSize(50);
  text("Standard", 130,180);
  
  fill(255);
  rect(25,500,950,180);
  fill(0);
  text("retour", 450, 590);
}

```

---

<div class="post-metadata">

### Author: ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [July 4, 2021, 3:09pm UTC](https://discourse.processing.org/t/overlaping-clickable-buttons/31044/2 "2021-07-04T15:09:41Z")

</div>

Make a global variable that checks if a button has been pressed, and make sure button presses requires the boolean state to be off first.

Now note this might still cause an issue depending on the order you are drawing the buttons. The main button should be first in this instance.

---

<div class="post-metadata">

### Author: ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [July 4, 2021, 3:55pm UTC](https://discourse.processing.org/t/overlaping-clickable-buttons/31044/3 "2021-07-04T15:55:26Z")

</div>

You might try connecting the color of your buttons to your conditional statements to distinguish between main menu and submenu buttons.  
🤓

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [July 4, 2021, 4:44pm UTC](https://discourse.processing.org/t/overlaping-clickable-buttons/31044/4 "2021-07-04T16:44:41Z")

</div>

> [@Kingjuleyann](#):
>
> ```auto
> if (mode==0) //main menu
> {
> 
> ```

It’s good that you distinguish between mode (states) in mousePressed but please use ….else if(mode==1) to hinder processing from running into the second if block right away (after the first if-block set mode to 1)

---

<div class="post-metadata">

### Author: ![Kingjuleyann](https://avatars.discourse-cdn.com/v4/letter/k/f475e1/32.png) [@Kingjuleyann](https://discourse.processing.org/u/Kingjuleyann)
#### Post date: [July 4, 2021, 5:49pm UTC](https://discourse.processing.org/t/overlaping-clickable-buttons/31044/5 "2021-07-04T17:49:25Z")

</div>

thanks, surprisingly it now works after i applied your sugestion @Chrisir