# How can I change the page by clicking a button?

**URL:** <https://discourse.processing.org/t/how-can-i-change-the-page-by-clicking-a-button/15244>\
**Category:** Coding Questions\
**Created:** [November 5, 2019, 7:25am UTC](https://discourse.processing.org/t/how-can-i-change-the-page-by-clicking-a-button/15244 "2019-11-05T07:25:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![CyberDodo](https://avatars.discourse-cdn.com/v4/letter/c/f0a364/32.png) [@CyberDodo](https://discourse.processing.org/u/CyberDodo)\
**Post date:** [November 5, 2019, 7:25am UTC](https://discourse.processing.org/t/how-can-i-change-the-page-by-clicking-a-button/15244/1 "2019-11-05T07:25:11Z")

</div>

How can I change the page by clicking a button?

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [November 5, 2019, 8:02am UTC](https://discourse.processing.org/t/how-can-i-change-the-page-by-clicking-a-button/15244/2 "2019-11-05T08:02:22Z")

</div>

If you have navigated through several pages, you can click on the back button, or if you have several tabs, you can click on another and so you change the page 🤪🤪.

Also clicking in the top “P” of processing 😛… there are several ways, Which one you want? 😬

---

<div class="post-metadata">

**Author:** ![CyberDodo](https://avatars.discourse-cdn.com/v4/letter/c/f0a364/32.png) [@CyberDodo](https://discourse.processing.org/u/CyberDodo)\
**Post date:** [November 5, 2019, 8:07am UTC](https://discourse.processing.org/t/how-can-i-change-the-page-by-clicking-a-button/15244/3 "2019-11-05T08:07:55Z")

</div>

I want to program it that if I press the button a clear page with a text and a back button appears.

```auto
boolean InButtonSelection = true;
PImage bg;
void setup() {
size( 1366, 768);
bg = loadImage("qrC6FvL.jpg");
fill(0, 255, 0);
rect (300, 300, 300, 300);
fill(255, 0, 0);
rect (700, 300, 300, 300);
}
void draw() {

  background(bg);
  
  if (mousePressed) {
    
    if (InButtonSelection) {
      
      if (mouseY > 100 && mouseY < 350 && mouseX > 100 && mouseX < 350 ) {
  
  fill(0, 0, 0);
  text("Frage 1:", 600,150);
  text("Wir haben einen nicht gelisteten Helfer.", 350,190);
  fill(0, 255, 0);
  rect (300, 300, 300, 300);
  textSize(32);
  fill(0, 51, 0);
  text("WAHR", 400, 450);

  fill(255, 0, 0);
  rect (700, 300, 300, 300);
  textSize(32);
  fill( 128, 0, 0);
  text("FALSCH", 800, 450);
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 5, 2019, 8:31am UTC](https://discourse.processing.org/t/how-can-i-change-the-page-by-clicking-a-button/15244/4 "2019-11-05T08:31:01Z")

</div>

see also  
[Background(image) not working](https://discourse.processing.org/t/background-image-not-working/14305/18) !

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [November 5, 2019, 8:33am UTC](https://discourse.processing.org/t/how-can-i-change-the-page-by-clicking-a-button/15244/5 "2019-11-05T08:33:08Z")

</div>

You can use flags, for example:

```auto
int flag = 0;
void setup() {
  background(122,29,57);
  textAlign(CENTER);
  textSize(20);
}
void draw() {
      if(flag == 0){
        push();
        background(122,29,57);
        rect(10,10,10,10);
        ellipse(50,50,50,50);
        fill(255,255,0);
        text("Main Page",width/2,height-8);
        pop();
      } else if (flag == 1){
        push();
        background(0,255,0);
        rect(60,80,30,10);
        fill(0);
        text("Green\nPage",width/2,20);
        pop();      
      }else if (flag == 2){
        push();
        background(0,0,255);
        rect(10,80,30,10); 
        fill(255);
        text("Blue Page",width/2,20);
        pop();           
      }
}

void mousePressed(){
  println("MouseX: " + mouseX + " MouseY: " + mouseY + " Flag: " + flag);
  if(flag == 0){
  if(mouseX>10 && mouseX < 20 && mouseY >10 && mouseY <20){
    flag = 1;
  }
  if(dist(mouseX,mouseY,50,50)<25){
    flag = 2;
  }
  }
  if(flag == 1){
  if(mouseX>60 && mouseX < 90 && mouseY >80 && mouseY <90){
    flag = 0;
  }
  } if(flag == 2){
  if(mouseX>10 && mouseX < 40 && mouseY >80 && mouseY <90){
    flag = 0;
  }}

}

```

You can use classes to create the buttons (much better in my opinion), I let you this example to give you an idea 😃

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [November 5, 2019, 8:37am UTC](https://discourse.processing.org/t/how-can-i-change-the-page-by-clicking-a-button/15244/6 "2019-11-05T08:37:57Z")

</div>

Yeah, better check @kll tutorials to learn how to do it 😃

---

<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:** [November 5, 2019, 11:31am UTC](https://discourse.processing.org/t/how-can-i-change-the-page-by-clicking-a-button/15244/7 "2019-11-05T11:31:10Z")

</div>

the example below shows how to handle different screens

For a real quiz though, it would be easier to have an array with questions / texts (“Wir haben einen nicht gelisteten Helfer.”) and a 2nd array if the right answer is true or false (Wahr / falsch). So you can compare the input with the 2nd array and say score++ if he was correct.

This means that you then can for-loop over the arrays and have a very lean code structure.

You would only have an intro screen, a quiz screen (showing the array questions), a results screen (you have 5 of 7 answers correct).

My version below would have the questions hard coded which gives you a lot of redundant code… and a lot of screens. The current screen is indicated by variable state by the way.

Chrisir

```auto

boolean InButtonSelection = true;
PImage bg;

int state=0;

void setup() {
  size( 1366, 768);
  bg = loadImage("qrC6FvL.jpg");
}

void draw() {

  background(255);//bg

  //fill(0, 255, 0);
  //rect (300, 300, 300, 300);
  //fill(255, 0, 0);
  //rect (700, 300, 300, 300);

  noFill();
  rect (100, 100, 200, 200);
  fill(0);
  text("Weiter", 110, 140);

  switch(state) {
  case 0: 
    fill(0, 0, 0);
    text("Frage 1:", 600, 150);
    text("Wir haben einen nicht gelisteten Helfer.", 350, 190);

    fill(0, 255, 0);
    rect (300, 300, 300, 300);
    textSize(32);
    fill(0, 51, 0);
    text("WAHR", 400, 450);

    fill(255, 0, 0);
    rect (700, 300, 300, 300);
    textSize(32);
    fill( 128, 0, 0);
    text("FALSCH", 800, 450);
    break;

  case 1:
    text("Frage 2:", 600, 150);
    text("Wir .....................................", 350, 190);
    fill(0, 255, 0);
    rect (300, 300, 300, 300);
    textSize(32);
    fill(0, 51, 0);
    text("WAHR", 400, 450);

    fill(255, 0, 0);
    rect (700, 300, 300, 300);
    textSize(32);
    fill( 128, 0, 0);
    text("FALSCH", 800, 450);

    break;

  case 2:
    text("Frage 3:", 600, 150);
    text("Wir .....................................", 350, 190);
    fill(0, 255, 0);
    rect (300, 300, 300, 300);
    textSize(32);
    fill(0, 51, 0);
    text("WAHR", 400, 450);

    fill(255, 0, 0);
    rect (700, 300, 300, 300);
    textSize(32);
    fill( 128, 0, 0);
    text("FALSCH", 800, 450);

    break; 

  default:
    text("GAME OVER ", 600, 150);
    break;
  }//switch
}

void mousePressed() {
  // if (InButtonSelection) {
  // }

  if (mouseY > 100 && 
    mouseY < 350 && 
    mouseX > 100 &&
    mouseX < 350 ) {
    // mouse //
    state++;
  } else if (false ) {
    //
  }
}
//

```