I am stuck on the fifth challenge on Khan Academy’s “Intro to JS: Drawing and Animation”.
I have added the code that I think it needs, and this is what it says “You’ll need to check 4 conditions to make sure your mouse is inside the button - two comparisons of mouseX and two comparisons of mouseY”.
I don’t know how to make it so when i click the button only it will change color.
This is what they ask you to do:
Right now, if you press anywhere on the canvas,
the button will change color (Try it!).
We want the button to change color only when we press inside of it.
To do that,
you'll need to use comparison operators (>, <) with the current mouse x and mouse y position.
You'll have to check multiple conditions (like that the x is greater than one number but less than another),
so you'll also use &&.
// **HINT** //
if (mouseIsPressed && _____);
fill(_____);
}
Here is the starting code:
draw = function() {
fill(0, 255, 68); // start color
if (mouseIsPressed) {
fill(33, 112, 52); // click color
}
rect(50, 150, 250, 100); // the button
// The button text
fill(0, 0, 0);
textSize(30);
text("PRESS ME!", 93, 193);
};
Here is my code:
draw = function() {
fill(0, 255, 68); // start color
if (mouseIsPressed && mouseX === 50 || mouseX > 300 || mouseY === 150 || mouseY > 250) {
fill(33, 112, 52); // click color
rect(50, 150, 250, 100); // the button
}
// The button text
fill(0, 0, 0);
textSize(30);
text("PRESS ME!", 93, 193);
};