Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Joseph Wagner
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Wagner
Android Development Techdegree Graduate 27,137 Points
Posted by Joseph Wagner
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Wagner
Android Development Techdegree Graduate 27,137 Points

JS Problem Addition / Concatenating Problem

I'm trying to do the following on a click. Change class "completed1" to class "completed2". I use a while loop to find the correct class, and remove it, no problem here. But when adding the new class, it sets as "completed5".

I've noticed the nextComplete number appended to the end of the class is equal to the number specified in the conditional, any hints why this is happening? Thanks a lot! 

var divChange = $self.parents("div.record");
        var i = 0;
        while(i < 5)
                {   var currentComplete = "completed" + i;
                    var nextComplete = "completed" + (i+1);
                    if ( $(divChange).hasClass(currentComplete)) 

                        {
                            $(divChange).addClass(nextComplete).removeClass(currentComplete);
                        }
                    i++;    
                }

3 Answers

Chris Malcolm
Chris Malcolm
2,909 Points
Chris Malcolm
Chris Malcolm
2,909 Points

dom will not update until the end within running loops. you increment i++ every time so your class will always return your i+1 (i.e. 5) . are you sure you need the while loop to change class? why not omit it to just increment the class, if i<5.

var divChange = $self.parents("div.record");
      //grab i from your class, asuuming you only have 1.
        var i = parseInt( $(divChange).attr("class").replace(/completed/,""));
        if (i < 5)
                {   
                    var currentComplete = "completed" + i;
                    var nextComplete = "completed" + (i+1);
                    if ( $(divChange).hasClass(currentComplete)) 

                        {
                            $(divChange).addClass(nextComplete).removeClass(currentComplete);
                        }
                   // i++;    
                }
Joseph Wagner
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Wagner
Android Development Techdegree Graduate 27,137 Points
Joseph Wagner
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Wagner
Android Development Techdegree Graduate 27,137 Points

Thanks, worked like a charm.

I'm still a bit confused on the addition aspect, I can subtract values without a problem but can't add any. I'll take a look on google but if you have a good example please share.

Thanks again for the help!

Chris Malcolm
Chris Malcolm
2,909 Points
Chris Malcolm
Chris Malcolm
2,909 Points

the problem with your first snippet is that you weren't breaking the loop after finding a match.. so if your at current1 (and i==1) then your going to be set to current2..then on the next loop in the while statement..it would find the match for current2 (i==2) and change to current3..and so on...until it reaches 5.

so if you still wanted to use the while and your initial code, you probably could of added a break; at end of your if hasclass(currentcomplete)

if ( $(divChange).hasClass(currentComplete)) 

                        {
                            $(divChange).addClass(nextComplete).removeClass(currentComplete);
                            break;
                        }