If statement inside a JavaScript game not correctly executing

Question

I have the following code and am trying to get the flappy bird to rise in the air which any part of the canvas is clicked.

I think I have placed the if statement wrong or there is some error with it.

 if(c.onclick="True"){
                birdDY==9;
            }

Could the error in this code be pointed out along with an explanation for where it should go?

Whole code:

    <style>
    #block{
        width: 50px;
        height: 500px;
        background-color: greenyellow;
        position: relative;
        left: 400px;
        animation: block 2s infinite linear;
    }
    @keyframes block{
        0%{left:400px}
        100%{left:-50px}
    }
    #hole{
        width: 50px;
        height: 150px;
        background-color: white;
        position: relative;
        left: 400px;
        top: -500px;
        animation: block 2s infinite linear;
    }
    </style>
     <body style="height: 100vh; background: #111; text-align: center;">
      <canvas id="c" width="400" height="400"></canvas>
      
      <div id="block"></div>
              
      <script>
          
        //set up context
        context = c.getContext("2d");
        //create bird
        const bird = new Image();
        bird.src = "bird.png";
        //create variables
        var canvasSize = 400;
        var birdSize=30;
        var birdX = 0;
        var birdY =200;
        var birdDY = 0;
          
        var score = 0;
        var bestScore=0;
        var interval = 30; //the speed at which the game is played
        
        c.onclick = () => (birdDY = 9) ;
        
          
          setInterval(() => {
          context.fillStyle = "skyblue";
          context.fillRect(0,0,canvasSize,canvasSize); // Draw sky
          birdY -= birdDY -= 0.5; // Gravity
          context.drawImage(bird, birdX, birdY, birdSize, birdSize); // Draw bird (multiply the birdSize by a number to adjust size)
          context.fillStyle = "black";
          context.fillText(`Flappy Birds`, 170, 10); //x and y
          context.fillText(`Score: ${score++}`,350, 380); // Draw score
          context.fillStyle = "green";
          context.fillRect(300,20,canvasSize,canvasSize); // Draw blocks
           
        }, interval)
      </script>
    </body>

`=` is for assigning values, `==` and `===` are for comparing values. — Pointy, Feb 08 '21 at 15:27
The comparisson operator is "==", try: if(c.onclick == "True"){} — sonEtLumiere, Feb 08 '21 at 15:27
The return values of event listeners can't be catched, just set `birdDY=9;` inside the click handler. — Teemu, Feb 08 '21 at 15:32
could one or all of you please put this in a solution/answer and I will verify/accept. — Compoot, Feb 08 '21 at 15:34
What is yor goal for the `if`? As it is, it doesn't make any sense, are you expecting `c.onclick` to become `true` after a user has clicked on the canvas? — Teemu, Feb 08 '21 at 15:35
@Teemu - the goal, as explained in the question, is for the flappy bird to go UP everytime the user clicks the screen. — Compoot, Feb 08 '21 at 15:36
this works - c.onclick = () => (birdDY = 9) ; but I want to re-write that in a simple way for beginners (using a simple function) — Compoot, Feb 08 '21 at 15:40
`if` statement is not a function, the `onclick` is already the simplest possible way to do what you need. — Teemu, Feb 08 '21 at 15:42

Scott Marcus · Accepted Answer · 2021-02-08T15:46:14.360

1

You're not approaching the problem correctly.

First, = is used to assign a value, not test it. To *compare values, use == or ===. In your case, you are setting onclick to "True", which itself can be evaluated as a "truthy" statement, so you would always execute the true branch of the if.

Next, in JavaScript, true is how you reference the Boolean true value. "True" is a string.

But, onclick is a property and you shouldn't be testing it for true in the first place. Your code is set to run immediately, instead you should be setting up an "event handling function (event handler) that will run when the element gets clicked. To do this use, .addEventListener() as in the following

// Get a reference to the DOM element
const button = document.querySelector("button");

// Set up the event handler
button.addEventListener("click", doStuff);

// Define the event handling callback function
function doStuff(event){
  console.log("You clicked the button.");
}

<button>Click Me</button>

In your case, that would mean your code would look like:

c.addEventLIstener("click", function(){
  birdDY = 9; }
);

edited Feb 08 '21 at 15:46

answered Feb 08 '21 at 15:36

Scott Marcus

64,069
6
49
71

useful, thank you - but can you post a solution so that my bird jumps on click. I am aware I've approached it wrong and am trying ... – Compoot Feb 08 '21 at 15:39
1

@Compoot I really have, just replace the `button` in my example, with your reference to your `bird` element. – Scott Marcus Feb 08 '21 at 15:39
this works: c.onclick = () => (birdDY = 9) ; – Compoot Feb 08 '21 at 15:40
I want to rewrite the above in a simple way using a function...I did not downvote you btw! – Compoot Feb 08 '21 at 15:40
@Compoot You really shouldn't be using `onclick`, which is an event property. Instead, use `.addEventListener()`, but beyond that you'll have to be more specific as to what you hope to really be testing with your `if` statement since you're setting `birdDY to 9`. Why would you want to test it for `"True"`? – Scott Marcus Feb 08 '21 at 15:42
i don't want or need the true. I was merely trying to re-write this: c.onclick = () => (birdDY = 9) ; .....what is a simple way of rewriting that such that it works (if you could add to your answer) – Compoot Feb 08 '21 at 15:43
`c.addEventLIstener("click", function(){ birdDY = 9; });` – Scott Marcus Feb 08 '21 at 15:44
thanks. Replace my if statement with what you've suggested and nothing works. (you can replicate it). Replace it with c.onclick = () => (birdDY = 9) ; and it works fine (bird jumps). How do I re-write that without the =() => in the traditional way - I suppose that would answer the question – Compoot Feb 08 '21 at 15:46
@Compoot You say that your code works with what you have, but when I try it, I get tons of errors immediately. – Scott Marcus Feb 08 '21 at 15:49
forget the rendering of the blocks. I am only interested in making the bird jump. the exact code above works fine for me, with c.onclick = () => (birdDY = 9) ; – Compoot Feb 08 '21 at 15:50
@Compoot I've already answered your question and I cannot ignore the multiple errors your code throws as is. I'm telling you `c.addEventLIstener("click", function(){ birdDY = 9; });` is a direct replacement for the more shorthand "arrow function" syntax you currently have. If it's not working, there is (likely) another problem. – Scott Marcus Feb 08 '21 at 15:52
thanks for trying - it doesn't work – Compoot Feb 08 '21 at 15:54
1

@Compoot Yes, you've said that a number of times. And I've said a number of times that the code you've shared with us doesn't work at all in the first place (using the code that you keep saying does work). It throws all kinds of errors immediately. So, the fact that using my code doesn't work just means that you have other problems to solve. – Scott Marcus Feb 08 '21 at 15:55
@Compoot I've edited your question so that the code you posted can be run (using the code you say works) and as you can see, it doesn't. – Scott Marcus Feb 08 '21 at 15:57
Thanks Scott - I see the question is now closed, but I've accepted your answer - most helpful, thanks. I see what you mean now and I think I have it. – Compoot Feb 08 '21 at 15:58

score -3 · Answer 2 · answered Feb 08 '21 at 15:36

-3

try

 if(c.onclick=="True"){
        birdDY=9;
  } 
// or try

 if(c.onclick===true){
        birdDY=9;
  }

Reference

https://www.w3schools.com/js/js_if_else.asp

Which equals operator (== vs ===) should be used in JavaScript comparisons?

answered Feb 08 '21 at 15:36

Rahul

1,858
1
12
33

thank you - but this doesn't work. See updated answer – Compoot Feb 08 '21 at 15:37
This only addresses the `=` vs. `==` and `"True"` vs. `true` issue. It doesn't address that the event handler is being set up incorrectly in the first place. – Scott Marcus Feb 08 '21 at 15:37
At first look, anyone can tell that **if** statement is not used correctly. Anyone should first try by fixing this issue. – Rahul Feb 08 '21 at 15:40
I am busy, so i can't figure out the code until **if** statement fixed. – Rahul Feb 08 '21 at 15:41
The **If** statement is the basic building block of any programming language, and one should not miss use it. – Rahul Feb 08 '21 at 15:42
I've updated the question - that is now == ...that's not the issue. – Compoot Feb 08 '21 at 15:42

If statement inside a JavaScript game not correctly executing

2 Answers2

Reference