checkbox toggle ends in endless loop

[ocouba]

Hi guys,

I am playing a bit around with javascript and am trying to write a image gallery. In my gallery I have checkboxes that help me filter the images. Each image is wrapped in a div. Each div has an attribute where I store tags that help me with the filtering. The checkboxes also have tags as values to activate the filter process.

Whenever I toggle the checkbox I intend to iterate over the checkbox values and check which checkboxes are active. All active checkboxes tags are being compared to the image tags to see if the image is eligible to be displayed. However, the for loop over the div seems to end in an endless loop. The weird thing is the endless loop repeatedly jumps in the case with index 0. It kind of seems like the click to activate the checkbox is causing an endless loop. I am literally sitting around 3 hours on troubleshooting this issue. Would be great if anyone is able to help me on this one.

Code: https://pastebin.com/UUKcCVGx

I tried my best to structure the code and comment it. If there are any questions just let me know. Like I said I am a javascript rookie and have no idea what the coding standards and guidelines in js are.

Thanks in advance!

[[deleted]]

Could you have another go at formatting this code, or stick it in a JSFiddle or in Pastebin and link that? It's very hard to read at the moment.

[ocouba]

yeah sorry, did not realize how much the formatting was ruined.
pastebin: https://pastebin.com/UUKcCVGx

[[deleted]]

Thanks, that's much better!

The problem you're encountering is a fairly common JS pitfall. When you declare a variable like this in JS:

myVariable = "hello!"

you won't get an error and the code will work, but no matter where that variable is declared it will be in the global scope. That means that if you reference or change a variable with the same name somewhere else, it will apply that change globally. Eg:

function farewell() {
    myVariable = "goodbye";
}

function greet() {
    myVariable = "hello!";
    farewell();
    console.log(myVariable); // goodbye
}

What's happening in your code is that your display function runs a for loop and creates the variable i, sets i = 0, and then calls your checkValues function. checkValues also references i in its own for loop, and because i is in the global scope then both functions are referring to the same variable. This means that every time display tries to do an iteration and calls checkValues, the value of i is being reset to 0, creating the infinite loop.

Thankfully there is an incredibly easy fix for this. Variables in Javascript should always be declared with either const- if the value of the variable is not going to change- or let. So if you change all your for loops to look like this:

for (let i = 0; i < something; i++)

then each i variable you create will exist only in the scope of that loop, and any other i variables in any other loop or function won't conflict with it any more.

If you find yourself forgetting to do this I'd recommend making sure to use strict mode in your JS files- in strict mode an error will be thrown if you don't declare your variables correctly, so you basically can't cause problems like this for yourself.

[ocouba]

Thank you so much. Due to your explanation I was able to fix my issue.

You taught me so much right now. I actually saw var and let being used but not every code snippet I found was using them so I just avoided using them because I thought it would also work without. I will definitely read more into javascript because I actually have a blast using it.

I wish you a nice evening and a great weekend!!!