Javascript setInterval() runs the function only once

Question

I have this code, where I'm trying to animate one of the divs. The div should move down, then after getting 20% lower should start moving up, then again down and so on.

The problem is, as it seems, that the code runs only once. Which means the div moves down by 2% only once and then stays at that position.

Javascript

var head = document.getElementById('char_furuta_head');
function anime() {
    var direction = 1; /* 1 = down, -1 = up */
    setInterval(frame, 1000);
    function frame() {
        str = head.style.top;
        str = substring(0,str.length);
        var lel = parseInt(str);
        console.log(lel);

        if (direction == 1) {
            lel += 2;
            head.style.top = lel + '%';
            if(lel == 20) { direction = -1; };
        } else {
            lel -= 2;
            head.style.top = lel + '%';
            if(lel == 0) { direction = 1; }; 
        }
    }
}

Answer 1

You've misdiagnosed the problem.

The interval is running fine.

You need to debug it properly. Add console.log statements to see when functions are called and what the values of your variables are :

  var lel = head.style.top; lel += 2; head.style.top = lel + '%'; 

The first time you call that:

1. lel is an empty string
2. lel is 2
3. head.style.top is 2%

The second time:

1. lel is 2%
2. lel is 2%2
3. head.style.top is 2% because 2%2 is invalid

The third time repeats the second time.

Use parseInt to extract the number from the length.

Answer 2

Your code has the following issues:

1.) function anime() has no closing bracket "}"

2.) The interval is 1 second - not sure if you realy want to move the DIV by 2% every second?

3.) You cannot add up percentages like "2%" + "2%". You need to cast the string into integer. You could use parseInt for this.

Answer 3

It runs every time, but your problem is that you declare the same thing, every single iteration.

Move var lel = head.style.top; outside your if statement.

    var head = document.getElementById('char_furuta_head');

    function anime() {
        var direction = 1;
        setInterval(frame, 1000);

        function frame() {
            // you need first to check here what units are you using in your css, so you can propely clean/parse the value and convert it to a number. I will consider it to be percentages.
            var lel = parseInt(head.style.top.replace('%',''));

            if (direction == 1) {    
                    lel += 2;
                    head.style.top = lel + '%';
                    if(lel == 20) { 
                        direction = -1; 
                    };
            } else {
                    lel -= 2;
                    head.style.top = lel + '%';
                    if(lel == 0) { 
                        direction = 1; 
                    }; 
            }
        }
    }

    anime();