'Is there a way that an event listener function could execute although there's an if statement preventing it from doing so?
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
Solution 1:[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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Farouk Hamadi |