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

It's less likely that it is running only once, and more likely that your logic is only causing a significant change to the page once. — Kevin B, Nov 15 '16 at 19:44
console.log() is your friend... Use it to see what happens... — epascarello, Nov 15 '16 at 19:54

Quentin · Accepted Answer · 2016-11-15T19:32:36.563

2

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:

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

The second time:

lel is 2%
lel is 2%2
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.

edited Nov 15 '16 at 19:32

answered Nov 15 '16 at 19:26

Quentin

914,110
126
1,211
1,335

I've edited the code so now it reads the string, parses it to int and then does the work. But in the console it still shows as NaN, therefore it still doesn't work. – Nov 15 '16 at 20:03
Ok, seems like the problem was because the first time I've got `str = head.style.top;`, variable `str` was just an empty string, therefore parseInt didn't work. All I had to do was to check for empty string in `str` before actually working with it, if anyone else had this trivial problem in the future. – Nov 15 '16 at 20:36

ESP32 · Answer 2 · 2016-11-15T19:34:55.113

-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.

edited Nov 15 '16 at 19:34

answered Nov 15 '16 at 19:31

ESP32

8,089
2
40
61

2

You can't add `"2px" + "2px"` either. – Quentin Nov 15 '16 at 19:32
Corrected the bracket problem, I just didn't copied it properly. – Nov 15 '16 at 19:40

n1kkou · Answer 3 · 2016-11-15T19:42:14.947

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();

this is ok, as every iteration reads the current value from the DOM CSS and adds/substracts 2%. No issue. — ESP32, Nov 15 '16 at 19:44
The problems seem to be with the `css`, if you don't have the styles inline. You can get more details from here: http://stackoverflow.com/questions/2664045/how-to-get-an-html-elements-style-values-in-javascript — n1kkou, Nov 15 '16 at 19:51
The styles are set inline when you set a value like head.style.top — ESP32, Nov 15 '16 at 19:54

Javascript setInterval() runs the function only once

3 Answers3