Using a for loop to condense code

Question

I have the following code which I would like to condense into a for loop but not sure how. I tried looking at other posts but got stuck.

There are 15 numbers all together so something like for (i = 1; i <= 15; i++)

       if(checksquare1save=="true"){
            $("#checksquare1").toggleClass("checksquareON");
        }

        else{
            $("#checksquare1").removeClass("checksquareON");
        }

        if(checksquare2save=="true"){
            $("#checksquare2").toggleClass("checksquareON");
        }

        else{
            $("#checksquare2").removeClass("checksquareON");
        }

        if(checksquare3save=="true"){
            $("#checksquare3").toggleClass("checksquareON");
        }

        else{
            $("#checksquare3").removeClass("checksquareON");
        }

        if(checksquare4save=="true"){
            $("#checksquare4").toggleClass("checksquareON");
        }

        else{
            $("#checksquare4").removeClass("checksquareON");
        }

        if(checksquare5save=="true"){
            $("#checksquare5").toggleClass("checksquareON");
        }

        else{
            $("#checksquare5").removeClass("checksquareON");
        }

        if(checksquare6save=="true"){
            $("#checksquare6").toggleClass("checksquareON");
        }

        else{
            $("#checksquare6").removeClass("checksquareON");
        }

        if(checksquare7save=="true"){
            $("#checksquare7").toggleClass("checksquareON");
        }

        else{
            $("#checksquare7").removeClass("checksquareON");
        }

        if(checksquare8save=="true"){
            $("#checksquare8").toggleClass("checksquareON");
        }

        else{
            $("#checksquare8").removeClass("checksquareON");
        }

        if(checksquare9save=="true"){
            $("#checksquare9").toggleClass("checksquareON");
        }

        else{
            $("#checksquare9").removeClass("checksquareON");
        }

        if(checksquare10save=="true"){
            $("#checksquare10").toggleClass("checksquareON");
        }

        else{
            $("#checksquare10").removeClass("checksquareON");
        }

        if(checksquare11save=="true"){
            $("#checksquare11").toggleClass("checksquareON");
        }

        else{
            $("#checksquare11").removeClass("checksquareON");
        }

        if(checksquare12save=="true"){
            $("#checksquare12").toggleClass("checksquareON");
        }

        else{
            $("#checksquare12").removeClass("checksquareON");
        }

        if(checksquare13save=="true"){
            $("#checksquare13").toggleClass("checksquareON");
        }

        else{
            $("#checksquare13").removeClass("checksquareON");
        }


        if(checksquare14save=="true"){
            $("#checksquare14").toggleClass("checksquareON");
        }

        else{
            $("#checksquare14").removeClass("checksquareON");
        }

        if(checksquare15save=="true"){
            $("#checksquare15").toggleClass("checksquareON");
        }

        else{
            $("#checksquare15").removeClass("checksquareON");
        }

I did try this but it didn't work

        for (i = 1; i <= 15; i++){
            if(checksquare + i + save=="true"){
                $("#checksquare" + i).toggleClass("checksquareON");
            }   
        }

Edit:

Should have mentioned I have these vars above

        checksquare1save = localStorage['ScienceSkills-basicSkillsCheck-check1-7868-2171-1085-5119-4672'] 
        checksquare2save = localStorage['ScienceSkills-basicSkillsCheck-check2-6582-7209-6435-8487-6994']
        checksquare3save =  localStorage['ScienceSkills-basicSkillsCheck-check3-5367-9000-3502-5810-2295']
        checksquare4save = localStorage['ScienceSkills-basicSkillsCheck-check4-2961-8359-5106-2702-5132'] 
        checksquare5save = localStorage['ScienceSkills-basicSkillsCheck-check5-5801-5256-5838-2934-5277'] 
        checksquare6save = localStorage['ScienceSkills-basicSkillsCheck-check6-1162-2208-7274-5156-3693']
        checksquare7save = localStorage['ScienceSkills-basicSkillsCheck-check7-6178-4335-3148-1809-8066']
        checksquare8save = localStorage['ScienceSkills-basicSkillsCheck-check8-6609-6032-4539-4243-6273']
        checksquare9save =  localStorage['ScienceSkills-basicSkillsCheck-check9-6261-3580-7658-7073-1914']
        checksquare10save = localStorage['ScienceSkills-basicSkillsCheck-check10-1504-7246-1864-4465-1319']
        checksquare11save = localStorage['ScienceSkills-basicSkillsCheck-check11-6400-3954-7124-3585-2086']
        checksquare12save = localStorage['ScienceSkills-basicSkillsCheck-check12-8303-8392-7301-5154-8007']
        checksquare13save = localStorage['ScienceSkills-basicSkillsCheck-check13-1207-8834-5941-3315-8893']
        checksquare14save = localStorage['ScienceSkills-basicSkillsCheck-check14-3089-4036-1427-2614-7399']
        checksquare15save = localStorage['ScienceSkills-basicSkillsCheck-check15-2750-4976-5357-6403-2979']

if(checksquare + i + save=="true"){ i think the wrong is here — roullie
– roullie, Commented Oct 30, 2013 at 13:31
set checksquareXsave variable as array. Easier to get its value because you can just do checksquaresave[i] — lipeiran
– lipeiran, Commented Oct 30, 2013 at 13:32

Jacques Snyman · Accepted Answer · 2013-10-30 13:42:04Z

5

This should work if your variables are in the global scope:

    for (i = 1; i <= 15; i++){
        if(window['checksquare' + i + 'save']=="true"){
            $("#checksquare" + i).toggleClass("checksquareON");
        }
        else{
            $("#checksquare" + i).removeClass("checksquareON");
        }
    }

edited Oct 30, 2013 at 13:42

answered Oct 30, 2013 at 13:34

Jacques Snyman

4,3502 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

craig Over a year ago

Edited my original post with the arrays I used if that helps

Guilherme Sehn Over a year ago

The . between the window and the bracket is causing a syntax error. Remove it and it'll be fine. :)

Jacques Snyman Over a year ago

Still does not really tell me if it's in the global scope, but I think it should work.

Jacques Snyman Over a year ago

Agrrr! Typo... Fixed now.

Nicolas Brugneaux · Accepted Answer · 2013-10-30 13:33:46Z

4

you better use an array checksquaresave and push into it all your checksquareXsave then loop the array like you're doing. it requires a bit of refactoring, but it'll save you some pain later on.

for (i = 1; i <= 15; i++){
   if(checksquare[i] == 'true'){
       $("#checksquare" + i).toggleClass("checksquareON");
   }
}

answered Oct 30, 2013 at 13:33

Nicolas Brugneaux

3532 silver badges8 bronze badges

Comments

Katana314 · Accepted Answer · 2013-10-30 13:35:48Z

When only shown the code that you have, the only solution that I can think of involves the use of eval. Forget I said that though, because you don't want to attempt that solution. Having 15 similarly-named variables is likely an issue. You might be able to use window.variableName or window["variableName"] to retrieve them IF the "checksquaresave" variables are globals. In that case, it would look like:

if (window["checksquare" + i + "save"] == "true")

Otherwise, it would be good to inspect the creation of the checksquare##save variables, and set them up as an array rather than seperate variables. Then, your code could look like this:

    for (i = 1; i <= 15; i++){
        if(checksquaresave[i] =="true"){
            $("#checksquare" + i).toggleClass("checksquareON");
        }   
    }

pax162 · Accepted Answer · 2013-10-30 13:36:07Z

1

If you want to access variables for which you know the name only at runtime, you can store them as properties of an object.

So if you want to access checksquare1save, checksquare2save, etc, you can do this:

var storage = {
    checksquare0save:true,
    checksquare1save:true,
    checksquare2save:false,
    //...other variables...
}

for (var i = 0; i < 15, i++) {
    console.log(storage["checksquare" + i + "save"])
}

answered Oct 30, 2013 at 13:36

pax162

4,7452 gold badges24 silver badges30 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:50:06Z

1

the code you are doing right now will check the value of 3 variables: checksquare, i & save, instead of one.

a beter way would be to put all your data in an array and go through this.

if you had an array: checksquaresave. then you could fill it up with your values:

checksquaresave[0] =value0, checksquaresave[1] =value1 , ...

after this the code would be as simple as:

for (i = 1; i <= 15; i++){
    if(checksquaresave[i] =="true"){
        $("#checksquare" + i).toggleClass("checksquareON");
    }   
}

EDIT: as @Archer mentioned (and other answers as well) you can use

window["checksquare" + i + "save"]

as well, but I think the best way would be to just use an array. (cfr. using window["variable" + i] in javascript)

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Oct 30, 2013 at 13:31

Kristof Feys

1,8421 gold badge20 silver badges36 bronze badges

3 Comments

Reinstate Monica Cellio Over a year ago

Yes you can... window["checksquare" + i + "save"], but I agree that an array would be better ;)

Kristof Feys Over a year ago

Ah didn't know that! This will probably not be best practice though? (performance wise)

Reinstate Monica Cellio Over a year ago

I'd say it's not best practice, without giving a reason. It's just an unpleasant way of coding, and the very reason we have arrays! But, still handy to know.

Collectives™ on Stack Overflow

Using a for loop to condense code

5 Answers 5

4 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related