How do i make a third scene for the menu screen?

Question

(All in JavaScript) I need help, I am an absolute beginner in coding, I am currently learning at Khan Academy and was in the making of a new project: a menu screen for a game. Now I was successfully able to make a play button and make it work with an if function. Clicking the play button causes another scene to show up to which I added two more buttons: a Singleplayer and a Multiplayer button. Now the problem is that I can't apply the same thing I did to the play button to the multiplayer button, can someone tell me how I should proceed to make my code work? Also, I haven't yet finished the beginner course so sorry if this question has an obvious answer. Here is the code:

var rectWidth= 123;
var rectX = 149;
var rectY = 150;
var rectHeight = 60;
background(133, 76, 76);
fill(247, 3, 3);
rect(103,139,224,125);
textSize(22);
text("Battle Arena: The ancients.",93,55);
fill(240, 231, 231);
text("Play",195,206);

draw = function() { 
    
if (mouseIsPressed && mouseX < 327 && mouseX > 103 && mouseY < 228 && mouseY > 139 ) {
  
fill(81, 0, 255);
   rect(0,0,400,400);
   
fill(133, 76, 76);
rect(149,75,123,60);
fill(227, 25, 25);
text("Multiplayer",155,116);
rect(rectX,rectY,rectWidth,rectHeight);
fill(81, 71, 82);
text("Single(WIP)",151,191);

} if (mouseIsPressed && mouseX < 272 && mouseX > 149 && mouseY > 75 && mouseY < 135 && (rectWidth = 123) === true && (rectX = 149) === true && (rectY = 150) === true && (rectHeight= 60) === true){
    
    fill(0, 255, 0);
    rect(2,2,400,400);
    
}

 textSize(23);
    fill(137, 91, 235);
noStroke();




};

Answer 1

This answer is really late, so I doubt it will help at all, but I'll answer anyway.

This program's functions only work when the mouse is currently being pressed, not after the mouse gets pressed. At the beginning of your code, create a variable with the scene number var scene = 1; and use that to manage the scenes. Change if (mouseIsPressed && mouseX < 327 && mouseX > 103 && mouseY < 228 && mouseY > 139 ) to if (mouseIsPressed && mouseX < 327 && mouseX > 103 && mouseY < 228 && mouseY > 139 && scene === 1) to make the button only work if it's in the starting screen (so that you can't press the button when you're in another scene and can't even see it) and make it so that when the mouse is pressed it instead changes scene to 2, and runs the other code if it is set to 2, and do that again for whatever.

Code:

var rectWidth= 123;
var rectX = 149;
var rectY = 150;
var rectHeight = 60;
var scene = 1; // Scene variable
background(133, 76, 76);
fill(247, 3, 3);
rect(103,139,224,125);
textSize(22);
text("Battle Arena: The ancients.",93,55);
fill(240, 231, 231);
text("Play",195,206);

draw = function() { 
    
if (mouseIsPressed && mouseX < 327 && mouseX > 103 && mouseY < 228 && mouseY > 139 && scene == 1) {
  scene = 2; // Change the scene to 2
} if (mouseIsPressed && mouseX < 272 && mouseX > 149 && mouseY > 75 && mouseY < 135 && (rectWidth = 123) === true && (rectX = 149) === true && (rectY = 150) === true && (rectHeight= 60) === true && scene === 3){
    scene = 3; // Change the scene to 3
}

// Make it so that elements appear only if the correct scene is selected

if (scene === 2) {
fill(81, 0, 255);
rect(0,0,400,400);
   
fill(133, 76, 76);
rect(149,75,123,60);
fill(227, 25, 25);
text("Multiplayer",155,116);
rect(rectX,rectY,rectWidth,rectHeight);
fill(81, 71, 82);
text("Single(WIP)",151,191);
} else if (scene === 3) {
fill(0, 255, 0);
rect(2,2,400,400);
}

textSize(23);
fill(137, 91, 235);
noStroke();




};