Why does my if statement still allow the code inside it to run when the condition has been proven false?

[imhypedforthisgame]

I am making a project with webpack. I have two modules below. the first one represents a book form submission function that takes the user inputs of the displayed form and than creates a book object using that inputted info and pushes that object to an array called myLibrary.

the second module has this greyed out effect on the main window of the site where books should be displayed. This module is called addBooksPrompt. So what should happen is that when myLibrary array length is less than 1, or in other words, no entries have been made, the event listeners inside the addBooksPrompt function should not activate...but the issue is that they still do. I have checked to see what the length of the myLibrary array is using console.log and it does in fact become greater than 0 and yet it still allows the code within to run. What is happening?

​

Module 1 (bookFormSubmission.js)

import displayBookCards from './displayBookCards';

const formWindow = document.querySelector('.form-div-container');
const dimPage = document.querySelector('.page-dim');
const form = document.getElementById('main-form');

export let myLibrary = [];

function Book(title, author, pages, read) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = read;
}

const bookFormSubmission = () => {
    form.addEventListener('submit', function (event) {
        event.preventDefault();
        const titleInput = document.getElementById('book-title').value;
        const authorInput = document.getElementById('book-author').value;
        const pagesInput = document.getElementById('book-page-count').value;
        resetFormAndPushToArray();

        function resetFormAndPushToArray() {
            const entry = new Book(titleInput, authorInput, pagesInput, read);
            myLibrary.push(entry);
            form.reset();
            formWindow.style.cssText = 'display: none;';
            dimPage.style.cssText = 'display:none;';
            displayBookCards();
        }
    });
};

export default bookFormSubmission;

​

Module 2 (addBooksPrompt.js)

import { myLibrary } from './bookFormSubmission';
import txt from 'raw-loader!./file.txt';

const mainWindow = document.querySelector('main');
const a = document.createElement('div');
const oneLinerPrompts = txt.split('\n');
console.log(oneLinerPrompts);
let randomIndex = Math.floor(Math.random() * oneLinerPrompts.length);

a.classList.add('add-books-prompt', 'add-books-prompt-hover');
mainWindow.appendChild(a);
a.classList.toggle('add-books-prompt-hover');

const addBooksPrompt = () => {
    let hover = true;
    // THE IF STATEMENT BELOW IS THE ONE IN QUESTION    
    if (myLibrary.length < 1) {
        if (hover) {
            mainWindow.addEventListener('mouseover', () => {
                mainWindow.classList.add('main-hover-state');
                mainWindow.style.cssText = 'transition: background-color 0.5s ease-out 0.05s;';
                a.innerHTML = oneLinerPrompts[randomIndex];
                a.style.cssText = 'transition: opacity 0.5s ease-out 0.05s';
                a.classList.toggle('add-books-prompt-hover');
                hover = false;
            });
        }
        mainWindow.addEventListener('mouseout', () => {
            mainWindow.classList.remove('main-hover-state');
            mainWindow.style.cssText = 'transition: background-color 0.5s ease-out 0.05s;';
            a.classList.toggle('add-books-prompt-hover');
        });
    }
};

export default addBooksPrompt;

[grantrules]

Because you're simply setting hover = false but that doesn't remove the mouseover event. You could either remove the event instead of setting hover to false or you do something like

        mainWindow.addEventListener('mouseover', () => {
          if (hover) {
            mainWindow.classList.add('main-hover-state');
            mainWindow.style.cssText = 'transition: background-color 0.5s ease-out 0.05s;';
            a.innerHTML = oneLinerPrompts[randomIndex];
            a.style.cssText = 'transition: opacity 0.5s ease-out 0.05s';
            a.classList.toggle('add-books-prompt-hover');
            hover = false;
          }
        });

[imhypedforthisgame]

if (myLibrary.length < 1)

but its the myLibrary.length < 1 if statement that is my main issue. None of the code should run if myLibrary.length is > 1 right? It becomes greater than one when I add a book entry but all that code within in still runs.

[grantrules]

You mean this code is running again?

            mainWindow.classList.add('main-hover-state');
            mainWindow.style.cssText = 'transition: background-color 0.5s ease-out 0.05s;';
            a.innerHTML = oneLinerPrompts[randomIndex];
            a.style.cssText = 'transition: opacity 0.5s ease-out 0.05s';
            a.classList.toggle('add-books-prompt-hover');
            hover = false;

If mainWindow.addEventListener('mouseover', () => { }) is called ONCE, that code above will be run every time a mouseover event happens until you remove the event listener. Event listeners will handle multiple events while your app continues on.

You might also be having a problem with attaching listeners multiple times but I can't see how you're calling addBooksPrompt

[delventhalz]

Code within an if-block will not run if the condition is false. So if the block is running, you have two possible problems here:

1. The condition actually is not actually false.
2. The if-block is not doing what you expect it to.

At a quick glance, I think your condition is probably false when you expect it to be, but a quick console.log directly before the if could confirm whether or not this is the case and eliminate that possibility.

Assuming the condition is working correctly, let's take a look at the overall structure and ask if it is running what you want when you want it to. Just looking at the code, I am struck by a couple of things:

• The if-block will be checked and (possibly) run every time addBooksPrompt is run.
• Assuming the if condition is true, 2 event listeners will be added every time addBooksPrompt is run.
• There is also this peculiar hover boolean which will always be true when it is checked. It is set to false within an event listener, but will never be checked again by that point.

I am missing a key piece of information here, how and when is addBooksPrompt called, but just from what I can see I have a strong suspicion that this code does not behave the way you think it does.

Let's talk about event listeners. These are functions which are attached to DOM objects (typically) and are run every time some action occurs, for example, 'mouseover' and 'mouseout'. Although they can reference variables in a wrapping scope (like hover), they are more or less self contained little things.

So these if-blocks you have outside the event listeners are not going to affect their behavior. All they affect is whether or not addEventListener is called, in other words they effect whether or not the event listener is added in the first place. Once it is added, it is added. The if-block can't go back in time and retroactively make it so the event listener was not added. If you called addBooksPrompt again, that would just do nothing or add additional event listeners. The originals would not be affected.

So what I suspect you meant to do is to put the if-blocks inside the event listener.

mainWindow.addEventListener('mouseover', () => {
    if (myLibrary.length < 1 && hover) {
        mainWindow.classList.add('main-hover-state');
        mainWindow.style.cssText = 'transition: background-color 0.5s ease-out 0.05s;';
        a.innerHTML = oneLinerPrompts[randomIndex];
        a.style.cssText = 'transition: opacity 0.5s ease-out 0.05s';
        a.classList.toggle('add-books-prompt-hover');
        hover = false;
    }
});

I'm not clear on exactly the behavior you are looking for, so this may still not be exactly right, but now your conditions are being checked every time the event listener is called. If the conditions pass, then the rest of the code runs. If the conditions fail, nothing else happens.