Use button to change screens

Question

I am making a simple bank system and I've been having trouble with creating a button that changes the screen and It would change the screen as button is pressed. I have tried using code such as screen = 1; in the problem but it doesnt seem to work

    let sumbit;
let input;
    let fullScreen;
let element, sizeback;
    let clear;
let check = 2;
let mainScreen;
let screen = 0;


//if(!alert('Alert For your User!')){window.location.reload();}

function begining() {
  createCanvas(1000, 500);
background(100,250);
//sizeback = background(100,200,250);
      sumbit = createButton('Submit');
  sumbit.mousePressed(button);
      sumbit.position(190, 60);

  input = createInput();
      input.position(20, 60);

  element = createElement('h2', 'What is the password : ');
      element.position(5, 10);

  fullScreen = createButton('FullScreen');
  fullScreen.mousePressed(full);
  fullscreen.noLoop()


  textAlign(CENTER);
      textSize(32);
}

function draw() {
  if(screen == 0) {
    begining()
  } else if(screen == 1) {
    bankScreen()
  } else if(screen == 2) {
    logout()
  }
}
//FullScreen button
function full() {
    let fs = fullscreen();
      fullscreen(!fs);
}

//Submit button 
function button() {
  const password = input.value();
  if(password == 2021) {
        element.html('Your Correct! ' + ' The answer was ' + password);
    for(var i = 0; i < 200; i++) {
      push();
        fill(random(255), random(255), random(255));
        translate(random(height), random(width));
            rotate(random(2 * PI));
        text(password, 20, 20);
      pop();
      let next = createButton('Next');
      next.mousePressed(nextpage);
      next.noLoop();
    }
    screen = 1;
  } else {
    if(!alert('Would you like to try again ?')){window.location.reload();}
  }  
 input.value('');
}

function bankScreen() {
  background(100,200,250);
  text("Login", 10, 50);
  
}

function nextpage() {
  screen = 1;
//Problem!!
}

html, body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sketch</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="libraries/p5.min.js"></script>
    <script src="libraries/p5.sound.min.js"></script>
  </head>

  <body>
    <script src="sketch.js"></script>
  </body>
</html>

Thank you for the help.

@user1599011 My trouble is that after getting the password right and clicking next it should switch over to ```function bankscreen()``` but it does not. — MRPie, May 11 '21 at 19:33
from `draw()`? What's the value of `screen` when `draw()` is called? — mykaf, May 11 '21 at 19:38
The value of ```screen``` in ```draw()``` is when the value of ```screen``` changes the screen changes. Originally I used the ```mousePressed()``` function but It doesn't fit the button. — MRPie, May 11 '21 at 20:05
If you make your code a runnable snippet and are more specific about what the expected/desired behavior is it will be a lot easier for people to help you: https://stackoverflow.com/questions/67410651/how-do-i-include-a-runnable-p5-js-sketch-in-a-stackoverflow-question — Paul Wheeler, May 11 '21 at 20:27
But what is the value of `screen` when when `draw()` is run? — mykaf, May 12 '21 at 19:35
Yep. And that's where `bankscreen()` would be called, but you said it's not getting called, so check the value of `screen` in `draw()` — mykaf, May 12 '21 at 19:44
The value of ```screen``` is ```0``` and It is getting increased to ```1``` when calling ```bankscreen()``` but it doesnt seem to be calling the ```bankscreen()```. Perhaps the ```screen``` value isn't changing. — MRPie, May 12 '21 at 19:48
Perhaps it has something to do with the ```nextpage()``` function — MRPie, May 12 '21 at 19:58

score 2 · Accepted Answer · answered May 11 '21 at 20:26

There are numerous issues with the posted code, and it is hard to tell which are because this code is incomplete, and which are bugs. However here are a few issues that stand out.

You have no setup function
You are creating a new canvas on every call to begining which doesn't make much sense.
You are creating HTML elements in functions called in draw
- Unless you disable looping you should not do this because HTML elements are persistent.
You are calling noLoop as an instance method on p5.Element in multiple places, this is not valid.
In the button function you create 200 "Next" buttons, that's probably not what you want to do.
In the button function you do a bunch of drawing, but unless looping is disabled this will immediately be covered up by the call to background in bankScreen on the next execution of draw
You don't remove the elements from the "beginning" screen when the submit button is clicked and you try to move to the "bankScreen"
When next page is clicked you are already on screen = 1 so that function has no effect.

I've attempted to fix the issues with your code:

let sumbit;
let input;
let fullScreen;
let element, sizeback;
let clear;
let check = 2;
let mainScreen;
let screen = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  noLoop();
}

function begining() {
  background(100, 250);
  //sizeback = background(100,200,250);
  sumbit = createButton('Submit');
  sumbit.mousePressed(button);
  sumbit.position(190, 60);

  input = createInput();
  input.position(20, 60);

  element = createElement('h2', 'What is the password : ');
  element.position(5, 10);

  fullScreen = createButton('FullScreen');
  fullScreen.mousePressed(full);
  // ???? This isn't a function on p5.Element
  // fullscreen.noLoop()


  textAlign(LEFT);
  textSize(32);
}

function draw() {
  if (screen == 0) {
    begining()
  } else if (screen == 1) {
    bankScreen()
  } else if (screen == 2) {
    logout()
  }
}

//FullScreen button
function full() {
  let fs = fullscreen();
  fullscreen(!fs);
}

//Submit button 
function button() {
  const password = input.value();
  if (password == 2021) {
    element.html('Your Correct! ' + ' The answer was ' + password);
    sumbit.remove();
    input.remove();
    // All of this drawing is pointless because it will be overridden in bankScreen();
    for (var i = 0; i < 200; i++) {
      push();
      fill(random(255), random(255), random(255));
      translate(random(height), random(width));
      rotate(random(2 * PI));
      text(password, 20, 20);
      pop();
      // Why are you making 200 Next buttons?
      let next = createButton('Next');
      // Don't forget to position your buttons
      next.position(width / 2, height / 2);
      next.mousePressed(nextpage);
      // ????? noLoop isn't a method on p5.Element
      // next.noLoop();
    }
    screen = 1;
    // Need to redraw since we disabled looping
    redraw();
  } else {
    if (!alert('Would you like to try again ?')) {
      window.location.reload();
    }
  }
  input.value('');
}

function bankScreen() {
  background(100, 200, 250);
  text("Login", 10, 150);
}

function nextpage() {
  // This does nothing because when it runs screen is already equal to 1 
  screen = 1;
  // Need to redraw since we disabled looping
  redraw();
  // What Problem?
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

Use button to change screens

1 Answers1