If statements - KHAN ACADEMY

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);
};

To make sure the button is pressed, all this conditions should be true (think about that for a second) so you would need to use all and operators, not or.

Doesn’t khan have support for this? We shouldn’t make a habit of answering such questions here

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.