Is there a way that an event listener function could execute although there's an if statement preventing it from doing so?

Question

I've been trying to make this work but I can't seem to figure out where the problem is coming from or what's producing it. The script randomly executes parts of the if statement. Debugging didn't help me figure it out.

if (axisButton.textContent === 'AXIS: X') {
  console.log('first if statement');
  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      board[i][j].addEventListener('mouseenter', () => {
        /* If ship exceeds board, change aesthetics to indicate
        that */
        if (j > 5) {
          // Do some stuff
        } else {
          // If it doesn't exceed board, change bg-color

          // IMPORTANT: CODE IS NOT SUPPOSED TO REACH BOTH OF THESE

          console.log('weird1');
        }
      });
      board[i][j].addEventListener('mouseout', () => {
        // Remove styling when mouse leaves div          
      });
    }
  }
} else if (axisButton.textContent === 'AXIS: Y') {
  console.log('second if statement');
  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      board[i][j].addEventListener('mouseenter', () => {
        /* If ship exceeds board, change aesthetics to indicate
        that*/
        if (i + 5 >= 11) {
          // Do some stuff
        } else {

          // IMPORTANT: CODE IS NOT SUPPOSED TO REACH BOTH OF THESE

          console.log('weird2');
          // If it doesn't exceed board, change bg-color            
        }
      });
      board[i][j].addEventListener('mouseout', () => {
        // Remove styling when mouse leaves div          
      });
    }
  }
}

Those two 'IMPORTANT' comments are both executing even though they shouldn't be and this what I'm getting in console everytime I trigger the event:

main.js:1
first if statement
weird1
weird2

You could demonstrate this by clicking the axis button and hovering over the board and looking at the console in this codepen: https://codepen.io/FaroukHamadi/pen/xxPqBNa

Why shouldn't they be? `j` can be less than 5, and `i` can be less than 11-5. Maybe revise to make your thinking more clear. — isherwood, Feb 09 '22 at 20:58
Yes I'm not expecting that if statement to act differently, i'm talking about the outer one — Farouk Hamadi, Feb 09 '22 at 21:01
Please post your full log. Did it log "*first if statement*", or "*second if statement*", or both? If it prints none, then it wouldn't print "*weird1*"/"*weird2*" either. Please also make the code a [mcve] that we can run. — Bergi, Feb 09 '22 at 21:01
I edited it, it only logs one of the two, "first if statement" or "second if statement" — Farouk Hamadi, Feb 09 '22 at 21:03
I ran your code through the snippet editor's Tidy tool. Notice that there's an extra closing brace. Is your code not structured as you intended? — isherwood, Feb 09 '22 at 21:03
That's me copying one extra closing brace when trying to make the code minimal — Farouk Hamadi, Feb 09 '22 at 21:07
How is this code executed? Maybe the event handlers have been bound in a previous invocation of this code (with a different result of the condition). Of course an event handler will only be bound if the code for binding it is executed. If you see both event handlers be executed that means both code path have been taken at some point. — Felix Kling, Feb 09 '22 at 21:07
Does this answer your question? [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Heretic Monkey, Feb 09 '22 at 21:08
I can't see how using closures will solve my problem ? can you elaborate — Farouk Hamadi, Feb 09 '22 at 21:12
You probably should think of a pattern that doesn't require access to external variables to control later execution. It's brittle and prone to errors (as you've seen). Instead, add an attribute to the elements that you set to the index, if that's the key, and triggers the logic based on that instead. — Heretic Monkey, Feb 09 '22 at 21:13
Wrote a minimal example of the code on codepen ! check the edit out — Farouk Hamadi, Feb 09 '22 at 21:55

score -1 · Answer 1 · answered Apr 23 '22 at 20:08

-1

Found the solution! It turned out I had to replace the four event listener with only two and nest the if statement inside of them

answered Apr 23 '22 at 20:08

Farouk Hamadi

31
1
8

Is there a way that an event listener function could execute although there's an if statement preventing it from doing so?

1 Answers1