# Button clicked when not visible

**URL:** <https://discourse.processing.org/t/button-clicked-when-not-visible/23887>\
**Category:** Coding Questions\
**Created:** [September 16, 2020, 11:51am UTC](https://discourse.processing.org/t/button-clicked-when-not-visible/23887 "2020-09-16T11:51:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [September 16, 2020, 11:51am UTC](https://discourse.processing.org/t/button-clicked-when-not-visible/23887/1 "2020-09-16T11:51:13Z")

</div>

When clicking the Quiz button at a point, where the “richtig” or the “falsch” button would be, like on the left of the i, im not shown the first question, but the result screen, so the question is answered with the click on the quiz button. Does anybody know, why that is the case? You should probably try the program yourself to understand what I mean

```auto
int state = 0;
color green = color(72, 255, 0);
color red = color(255, 17, 0);
color lightblue = color(3, 182, 252);

PImage Team;
PImage Sponsoren;
PImage Produktion;
PImage Konstruktion;

int flag = 0;

// 3 parallel arrays 

String[] text1 = { 
  "1. Aussage:", 
  "2. Aussage:", 
  "3. Aussage:", 
  "4. Aussage:", 
  "5. Aussage:", 
  "6. Aussage:", 
};

String[] text2 = { 
  "Wir haben einen nicht gelisteten Helfer.", 
  " Wir sind das erste Mal dabei.", 
  "Unser Team besteht nur aus Leuten aus der 7. Klasse.", 
  " Unserer ITler ist der coolste.", 
  "Beim letzten Wettkampf kamen wir in die Top 5.", 
  "Unsere Schule stellt ein anderes Team.", 
};

int[] correct = {
  1, 
  2, 
  2, 
  1, 
  2, 
  1, 
};

// index for all 3 
int index = 0; 

String QUIZ = "Q\nU\nI\nZ\n";

int x1=100, y1=100, w1=250, h1=250; //Button oben links
int x2=1570, y2=100, w2=250, h2=250; //Button oben rechts
int x3=100, y3=750, w3=250, h3=250; //Button unten links
int x4=1570, y4=750, w4=250, h4=250; //Button unten rechts
int x5=80, y5=910, w5=250, h5=100; // Button zurück
int x6=860, y6=0, w6=200, h6=1080; //Button Quiz
int x7=260, y7=290, w7=500, h7=500; //Quiz left Button
int x8=1160, y8=290, w8=500, h8=500; //Quiz right Button

void drawMainButtons() { // _______ stat 0 only
  if ( over(x1, y1, w1, h1) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x1, y1, w1, h1);
  fill(255, 251, 0);
  textSize(50);
  text("Team", 160, 240);
  
  
  if ( over(x2, y2, w2, h2) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x2, y2, w2, h2);
  fill(255, 251, 0);
  textSize(37);
  text("Konstruktion", 1580, 240);
  
  
  if ( over(x3, y3, w3, h3) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x3, y3, w3, h3);
  fill(255, 251, 0);
  textSize(45);
  text("Produktion", 106, 890);
  
  
  if ( over(x4, y4, w4, h4) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x4, y4, w4, h4);
  fill(255, 251, 0);
  textSize(45);
  text("Sponsoren", 1580, 890);
  
  
  if ( over(x6, y6, w6, h6) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x6, y6, w6, h6);
  draw_quiz_text();
}

void draw_zurueck_button() { //_ state 1,2,3
  fill(84, 0, 153);
  if ( over(x5, y5, w5, h5) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  rect(x5, y5, w5, h5);

  fill(255, 251, 0);
  textSize(55);
  stroke(0);
  text("zurück", x5 + 35, y5 + 68);
  textSize(40);
  fill(0, 0, 200);
}

void draw_low_zurueck_button() {
  fill(84, 0, 153);
  if ( over(x5, y5 + 100, w5 - 50, h5 - 50) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  rect(x5, y5 + 100, w5 - 50, h5 - 50);

  fill(255, 251, 0);
  textSize(50);
  stroke(0);
  text("zurück", x5 + 15 , y5 + 140);
  textSize(40);
  fill(0, 0, 200);
}

void draw_quiz_text() {

  fill(255, 251, 0);
  textSize(150);
  stroke(0);
  textLeading(250);
  textAlign(CENTER);
  text(QUIZ, x6 + 95, y6 + 220);
  textAlign(LEFT);
  textSize(40);
  fill(0, 0, 200);
}

void actOnFlag() {
  if (flag == 0) {
    // Question 1
    pushStyle();
    background(255);
    fill(255, 0, 0);
    rect (1000, 500, 300, 300);
    fill(0, 255, 0);
    rect (600, 500, 300, 300);
    fill(0, 0, 0);
    text(text1[index], 900, 250);
    text(text2[index], 650, 290);
    textSize(32);
    fill(0, 51, 0);
    text("WAHR", 700, 650);
    textSize(32);
    fill( 128, 0, 0);
    text("FALSCH", 1100, 650);
    pushStyle();
  } else if (flag == 1 || flag == 2) {  
    //
    resultScreen();
  } else if (flag == 3) {
    background(255);   

    draw_zurueck_button();

    
    flag=0;
    index++;
    if ( index >= text2.length ) state=7;
    flag=0;
  } else {
    background(255);
    textSize(32);
    fill(255, 0, 0);
    text("Error in actOnFlag: "+flag, 600, 150);
  }
}//func 

void setup() {
  fullScreen();
  //size(1920, 1200);
  fill(0, 0, 200);
  strokeWeight(10);
  Team = loadImage("Team.png");
  Sponsoren = loadImage("Sponsoren.png");
  Produktion = loadImage("Produktion.png");
  Konstruktion = loadImage("Konstruktion.png");
}

void draw() {
  background(255);

  if ( state == 0 ) drawMainButtons(); 

  if ( state == 1 ) draw_back_button_and_some_text1();
  if ( state == 2 ) draw_back_button_and_some_text2();
  if ( state == 3 ) draw_back_button_and_some_text3();
  if ( state == 4 ) draw_back_button_and_some_text4();

  if ( state == 6 ) actOnFlag();
  if ( state == 7 ) {
   
    textSize(32);
    text("Das wars", 600, 150);
    text("Danke fürs mitmachen", 600, 200);
    draw_zurueck_button();
    index = 0;
    
  }
}

void mousePressed() {
  if ( state == 0 ) {
    if ( over(x1, y1, w1, h1) ) state = 1;
    if ( over(x2, y2, w2, h2) ) state = 2;
    if ( over(x3, y3, w3, h3) ) state = 3;
    if ( over(x4, y4, w4, h4) ) state = 4;
    if ( over(x6, y6, w6, h6) ) state = 6;
  } else {
    if ( state != 1 && state != 2 && state != 3 && state != 4){
    if ( over(x5, y5, w5, h5) ) state = 0;
    } else {

        if( over(x5, y5 + 100, w5 - 50, h5 - 50) ) state = 0;
 
    }
    
  }
    

  println("MouseX: " + mouseX + " MouseY: " + mouseY + " Flag: " + flag);

  //------------------------
  if (flag == 0) {
    if(state == 6){
    // Question 1
    if ( over(600, 500, 300, 300)) {     
      flag = 1;
    }
    if ( over(1000, 500, 300, 300)) {
      flag = 2;
    }
    }
  }
  //------------------------
  // Two result screens with a "Next button"
  else if (flag == 1) {
    // Correct 
    if (mouseX>600 && mouseX < 900 && mouseY >300 && mouseY <600) {
      flag = 3; // both proceed to Question 2
    }
  } else if (flag == 2) {
    // Wrong 
    if (mouseX>600 && mouseX < 900 && mouseY >300 && mouseY <600) {
      flag = 3; // both proceed to Question 2
    }
  } 
  //---------------------
  if (flag ==2 || flag == 1 || flag ==3) {
    if (mouseX>1316 && mouseX < 1366 && mouseY >0 && mouseY <50) {
      flag = 0;
    }//if
    //--------------------
    else {
      // flag = 0;
    }
    //
  }//func
  
}

void draw_back_button_and_some_text1() {
  background(Team);
  fill(0);
  //text("some text page1 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text2() {
  background(Konstruktion);
  fill(0);
  //text("some text page2 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text3() {
  background(Produktion);
  fill(0);
  //text("some text page3 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text4() {
  background(Sponsoren);
  fill(0);
  //text("some text page4 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void resultScreen() {
  if ((flag == 1 && correct[index] == 1) || (flag == 2 && correct[index] == 2)) {
    // Correct 
    pushStyle();
    background(255);
    fill(0, 255, 0);
    textSize(42);
    text("Richtig!", 600, 150);
    fill(0);
    rect(600, 300, 300, 300);
    textSize(32);
    fill(255);
    text("Nächste", 700, 400);
    text("Aussage->", 700, 450);

    draw_zurueck_button();

    popStyle();
  } else {
    // Wrong 
    pushStyle();
    background(255);
    fill(255, 0, 0);
    text("Falsch!", 600, 150);
    fill(0);
    rect(600, 300, 300, 300);
    textSize(32);
    fill(255);
    text("Nächste", 700, 400);
    text("Aussage->", 700, 450);

    draw_zurueck_button();

    popStyle();
  }
}//

boolean over(int x, int y, int w, int h) {
  return ( mouseX > x & mouseX < x + w &&
    mouseY > y & mouseY < y + h ) ;
}

```

---

<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:** [September 25, 2020, 11:56am UTC](https://discourse.processing.org/t/button-clicked-when-not-visible/23887/2 "2020-09-25T11:56:52Z")

</div>

I think I know why.

Let’s say you are in the Main Screen with Quiz etc. (state == 0)

Then you click Quiz

state gets 1 (or whatever)

BUT we are still in draw so the line if ( state == 1 ) draw\_back\_button\_and\_some\_text1();  
gets executed immediately.

Then mousePressed still true and if ( state == 2 ) draw\_back\_button\_and\_some\_text2(); applies

Same is true within mousePressed also. Use if…else if… here too

And you have stuff in mousePressed that is after (or outside) the if(state==…) … else if… construct altogether. Bad. That’s probably the main reason. After setting state to 6 in mousePressed we are still in mousePressed and run the “if (flag == 0) {” section immediately (and maybe the next flag section too, when it’s not separated by `if...else if...`).

* * *

**Solution**

In `draw()` use `if...else if...` so only ONE state is executed in one frame (loop) of `draw()`.

And (similarly) here in `mousePressed()` use` if...else if...` too:

```auto
    if ( over(x1, y1, w1, h1) ) state = 1;
    if ( over(x2, y2, w2, h2) ) state = 2;
    if ( over(x3, y3, w3, h3) ) state = 3;
    if ( over(x4, y4, w4, h4) ) state = 4;
    if ( over(x6, y6, w6, h6) ) state = 6;

```

Especially, after changing state to `6` in mousePressed(), the rest of mousePressed() should not be executed. Because then processing would immediately check the Wahr and Falsch button against the mouse (instead of waiting for a new mouse press!).

To avoid this I inserted

```auto
 if (state!=0) {
      flag = 0;
      println("return"); 
      return; // leave mousePressed() !!!!!!!!!!!!!!!!!!!!!
    }

```

in mousePressed(). This leaves the function early so the rest of mousePressed() is not executed. Good.

See below.

**Remark**

It would be also possible (and cleaner) to have  
a clean structure in mousePressed() like this:

```auto
  if ( state == 0 ){
  }
 
  else if ( state == 1 ) {
  }
  
  else if ( state == 2 ) {
  }
   
  else if ( state == 3 ) {
  }

  else if ( state == 4 ){
  }
 
  else if ( state == 6 ) {
  }//state 6
  
  else if ( state == 7 ) {
  }

```

and NOT have stuff (like the flag-section in mousePressed()) outside the entire `if state else if...` section.

Warm regards,

Chrisir

**Full Sketch**

```auto
int state = 0;
color green = color(72, 255, 0);
color red = color(255, 17, 0);
color lightblue = color(3, 182, 252);

PImage Team;
PImage Sponsoren;
PImage Produktion;
PImage Konstruktion;

int flag = 0;

// 3 parallel arrays 

String[] text1 = { 
  "1. Aussage:", 
  "2. Aussage:", 
  "3. Aussage:", 
  "4. Aussage:", 
  "5. Aussage:", 
  "6. Aussage:", 
};

String[] text2 = { 
  "Wir haben einen nicht gelisteten Helfer.", 
  " Wir sind das erste Mal dabei.", 
  "Unser Team besteht nur aus Leuten aus der 7. Klasse.", 
  " Unserer ITler ist der coolste.", 
  "Beim letzten Wettkampf kamen wir in die Top 5.", 
  "Unsere Schule stellt ein anderes Team.", 
};

int[] correct = {
  1, 
  2, 
  2, 
  1, 
  2, 
  1, 
};

// index for all 3 
int index = 0; 

String QUIZ = "Q\nU\nI\nZ\n";

int x1=100, y1=100, w1=250, h1=250; //Button oben links
int x2=1570, y2=100, w2=250, h2=250; //Button oben rechts
int x3=100, y3=750, w3=250, h3=250; //Button unten links
int x4=1570, y4=750, w4=250, h4=250; //Button unten rechts
int x5=80, y5=910, w5=250, h5=100; // Button zurück
int x6=860, y6=0, w6=200, h6=1080; //Button Quiz
int x7=260, y7=290, w7=500, h7=500; //Quiz left Button
int x8=1160, y8=290, w8=500, h8=500; //Quiz right Button

//---------------------------------------------------------------------------------

void drawMainButtons() { // _______ stat 0 only
  if ( over(x1, y1, w1, h1) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x1, y1, w1, h1);
  fill(255, 251, 0);
  textSize(50);
  text("Team", 160, 240);

  if ( over(x2, y2, w2, h2) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x2, y2, w2, h2);
  fill(255, 251, 0);
  textSize(37);
  text("Konstruktion", 1580, 240);

  if ( over(x3, y3, w3, h3) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x3, y3, w3, h3);
  fill(255, 251, 0);
  textSize(45);
  text("Produktion", 106, 890);

  if ( over(x4, y4, w4, h4) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x4, y4, w4, h4);
  fill(255, 251, 0);
  textSize(45);
  text("Sponsoren", 1580, 890);

  if ( over(x6, y6, w6, h6) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  fill(84, 0, 153);
  rect(x6, y6, w6, h6);
  draw_quiz_text();
}

void draw_zurueck_button() { //_ state 1,2,3
  fill(84, 0, 153);
  if ( over(x5, y5, w5, h5) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  rect(x5, y5, w5, h5);

  fill(255, 251, 0);
  textSize(55);
  stroke(0);
  text("zurück", x5 + 35, y5 + 68);
  textSize(40);
  fill(0, 0, 200);
}

void draw_low_zurueck_button() {
  fill(84, 0, 153);
  if ( over(x5, y5 + 100, w5 - 50, h5 - 50) ) stroke(255, 251, 0); 
  else stroke(0, 0, 200);
  rect(x5, y5 + 100, w5 - 50, h5 - 50);

  fill(255, 251, 0);
  textSize(50);
  stroke(0);
  text("zurück", x5 + 15, y5 + 140);
  textSize(40);
  fill(0, 0, 200);
}

void draw_quiz_text() {

  fill(255, 251, 0);
  textSize(150);
  stroke(0);
  textLeading(250);
  textAlign(CENTER);
  text(QUIZ, x6 + 95, y6 + 220);
  textAlign(LEFT);
  textSize(40);
  fill(0, 0, 200);
}

void actOnFlag() {
  if (flag == 0) {
    // Question 1
    pushStyle();
    background(255);
    fill(255, 0, 0);
    rect (1000, 500, 300, 300);
    fill(0, 255, 0);
    rect (600, 500, 300, 300);
    fill(0, 0, 0);
    text(text1[index], 900, 250);
    text(text2[index], 650, 290);
    textSize(32);
    fill(0, 51, 0);
    text("WAHR", 700, 650);
    textSize(32);
    fill( 128, 0, 0);
    text("FALSCH", 1100, 650);
    pushStyle();
  } else if (flag == 1 || flag == 2) {  
    //
    resultScreen();
  } else if (flag == 3) {
    background(255);   

    draw_zurueck_button();

    flag=0;
    index++;
    if ( index >= text2.length ) state=7;
    flag=0;
  } else {
    background(255);
    textSize(32);
    fill(255, 0, 0);
    text("Error in actOnFlag: "+flag, 600, 150);
  }
}//func 

//------------------------------------------------------------------------------------

void setup() {
  fullScreen();
  //size(1920, 1200);
  fill(0, 0, 200);
  strokeWeight(10);
  Team = loadImage("Team.png");
  Sponsoren = loadImage("Sponsoren.png");
  Produktion = loadImage("Produktion.png");
  Konstruktion = loadImage("Konstruktion.png");
}

void draw() {
  background(255);

  if ( state == 0 )
    drawMainButtons(); 
  else if ( state == 1 ) 
    draw_back_button_and_some_text1();
  else if ( state == 2 ) 
    draw_back_button_and_some_text2();
  else if ( state == 3 ) 
    draw_back_button_and_some_text3();
  else if ( state == 4 )
    draw_back_button_and_some_text4();
  else if ( state == 6 ) 
    actOnFlag();
  else if ( state == 7 ) {
    textSize(32);
    text("Das wars", 600, 150);
    text("Danke fürs mitmachen", 600, 200);
    draw_zurueck_button();
    index = 0;
  }
}//func 

//------------------------------------------------------------------------------------

void mousePressed() {
  if ( state == 0 ) {
    if ( over(x1, y1, w1, h1) ) state = 1;
    else if ( over(x2, y2, w2, h2) ) state = 2;
    else if ( over(x3, y3, w3, h3) ) state = 3;
    else if ( over(x4, y4, w4, h4) ) state = 4;
    else if ( over(x6, y6, w6, h6) ) state = 6;
    println(state); 
    if (state!=0) {
      flag = 0;
      println("return"); 
      return; // leave !!!!!!!!!!!!!!!!!!!!!
    }
  } else {
    if ( state != 1 && state != 2 && state != 3 && state != 4) {
      if ( over(x5, y5, w5, h5) ) state = 0;
    } else {
      if ( over(x5, y5 + 100, w5 - 50, h5 - 50) ) state = 0;
    }
  }

  println("MouseX: " + mouseX + " MouseY: " + mouseY + " Flag: " + flag);

  //------------------------
  if (flag == 0) {
    if (state == 6) {
      // Question 1
      if ( over(600, 500, 300, 300)) {     
        flag = 1;
      }
      if ( over(1000, 500, 300, 300)) {
        flag = 2;
      }
    }
  }
  //------------------------
  // Two result screens with a "Next button"
  else if (flag == 1) {
    // Correct 
    if (mouseX>600 && mouseX < 900 && mouseY >300 && mouseY <600) {
      flag = 3; // both proceed to Question 2
    }
  } else if (flag == 2) {
    // Wrong 
    if (mouseX>600 && mouseX < 900 && mouseY >300 && mouseY <600) {
      flag = 3; // both proceed to Question 2
    }
  } 
  //---------------------
  if (flag ==2 || flag == 1 || flag ==3) {
    if (mouseX>1316 && mouseX < 1366 && mouseY >0 && mouseY <50) {
      flag = 0;
    }//if
    //--------------------
    else {
      // flag = 0;
    }
    //
  }
}

//--------------------------------------------------------------------------------

void draw_back_button_and_some_text1() {
  background(Team);
  fill(0);
  //text("some text page1 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text2() {
  background(Konstruktion);
  fill(0);
  //text("some text page2 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text3() {
  background(0);
  fill(0);
  //text("some text page3 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void draw_back_button_and_some_text4() {
  background(Sponsoren);
  fill(0);
  //text("some text page4 ", 760, 50);
  //draw_zurueck_button();
  draw_low_zurueck_button();
}

void resultScreen() {
  if ((flag == 1 && correct[index] == 1) || (flag == 2 && correct[index] == 2)) {
    // Correct 
    pushStyle();
    background(255);
    fill(0, 255, 0);
    textSize(42);
    text("Richtig!", 600, 150);
    fill(0);
    rect(600, 300, 300, 300);
    textSize(32);
    fill(255);
    text("Nächste", 700, 400);
    text("Aussage->", 700, 450);

    draw_zurueck_button();

    popStyle();
  } else {
    // Wrong 
    pushStyle();
    background(255);
    fill(255, 0, 0);
    text("Falsch!", 600, 150);
    fill(0);
    rect(600, 300, 300, 300);
    textSize(32);
    fill(255);
    text("Nächste", 700, 400);
    text("Aussage->", 700, 450);

    draw_zurueck_button();

    popStyle();
  }
}//

boolean over(int x, int y, 
  int w, int h) {
  return 
    mouseX > x & 
    mouseX < x + w &&
    mouseY > y & 
    mouseY < y + h;
}//func 
//

```

---

<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:** [September 25, 2020, 12:01pm UTC](https://discourse.processing.org/t/button-clicked-when-not-visible/23887/3 "2020-09-25T12:01:56Z")

</div>

**Remark 2**

In my code, change background(0) back to background(Konstruktion); here, if I remember correctly

```auto
void draw_back_button_and_some_text3() {
  background(0);

```

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [October 7, 2020, 11:20am UTC](https://discourse.processing.org/t/button-clicked-when-not-visible/23887/4 "2020-10-07T11:20:54Z")

</div>

Thanks, that makes sense to me 🙂