Multiple counters in Javascript for loop

Question

Before i tear my hair out and go down the wrong path in terms of debugging. Can someone confirm that this code will do as intended. Ie. animate 5 divs to different positions:

var i, j, k;
$('#menuButton').click(function(){
    for (i=1; j=0; k=150; i<=5; i++; j+=30; k-=30){
        $('.spinner #item' + i).animate({
            left: '+=' + j,
            bottom: '+=' + k
          }, 500, function() {
            // Animation complete.
        });
    }
});

When i click the #menuButton, nothing happens and I get this error:

Uncaught SyntaxError: Unexpected token ; on the 'for()' line...

A for loop only takes three expressions. You probably want , between variable assignments. The ; are for separating the initial assignment, condition, and the expression to run after each iteration. — pimvdb
– pimvdb, Commented Dec 1, 2011 at 21:54
Why increment three different variables rather than increment one and multiply by it for the other values? jsfiddle.net/jasper/7fkx7/2 — Jasper
– Jasper, Commented Dec 1, 2011 at 22:01
@Jasper I like this a lot but it doesnt quite fit my requirements, i need the values to start at the ones i defined... — benhowdle89
– benhowdle89, Commented Dec 1, 2011 at 22:07
@benhowdle89 Gotcha. I see how this syntax is easy to use in that case. But you can add the initial value to each of the multiplications: jsfiddle.net/jasper/7fkx7/3. bottom : '+=' + (i * -30 + 150). It's like they teach you in algebra in High School for the equation of a line :)... ax+c (where c is your constant and a is your slope/rate) — Jasper
– Jasper, Commented Dec 1, 2011 at 22:11
@Jasper Fantastic!!! Out of interest, how would i apply a slightly more curved effect, rather than just in one line... — benhowdle89
– benhowdle89, Commented Dec 1, 2011 at 22:13

J. Holmes · Accepted Answer · 2011-12-01 21:54:35Z

59

You've got some semicolons where you want commas:

for (i=1, j=0, k=150; i<=5; i++, j+=30, k-=30) { /* do work */ }

You should only have three "statements" inside your for

for( [init]; [test]; [increments]) { [block] }

To do multiple [inits] or [increments] you have to use the sometimes magical, but oft forgotten, comma operator

answered Dec 1, 2011 at 21:54

J. Holmes

18.6k5 gold badges49 silver badges52 bronze badges

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

Comments

hugomg · Accepted Answer · 2011-12-01 21:56:34Z

16

too much semicolons there

for (i=1; j=0; k=150; i<=5; i++; j+=30; k-=30){

should be

for (i=1, j=0, k=150; i<=5; i++, j+=30, k-=30){

edited Dec 1, 2011 at 21:56

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

answered Dec 1, 2011 at 21:54

jAndy

237k57 gold badges313 silver badges363 bronze badges

Comments

bonkydog · Accepted Answer · 2019-06-18 18:02:16Z

2

You made gramatical errors in your code that you could have easily spotted had you used static code analysis tools such as the lovely JSHint.

In addition, you should further understand the use of the comma operator in JavaScript, our site has a few answers on it already.

edited Jun 18, 2019 at 18:02

bonkydog

2,04220 silver badges11 bronze badges

answered Dec 1, 2011 at 21:58

Incognito

20.8k15 gold badges82 silver badges121 bronze badges

Collectives™ on Stack Overflow

Multiple counters in Javascript for loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related