CODEWITHSUNDEEP
javascriptjqueryloops
craig
craig

Reputation: 581

Using a for loop to condense code

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']

Upvotes: 1

Views: 174

Answers (5)

Kristof Feys
Kristof Feys

Reputation: 1842

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)

Upvotes: 1

Jacques Snyman
Jacques Snyman

Reputation: 4290

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");
        }
    }

Upvotes: 5

pax162
pax162

Reputation: 4735

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"])
}

Upvotes: 1

Katana314
Katana314

Reputation: 8610

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");
        }   
    }

Upvotes: 1

Nicolas Brugneaux
Nicolas Brugneaux

Reputation: 353

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");
   }
}

Upvotes: 4

Related Questions