CODEWITHSUNDEEP
javascripthtmlanimation
Faiz Ahmed
Faiz Ahmed

Reputation: 251

Why does my setInterval function not work second time? (JavaScript)

I made a div and I want to make it animate in a specific direction every 1 second. In the code that I have provided there's a function called resetPosition() don't worry about that, it's from my other js file that I linked in the head section(That works perfectly). I just want to know why setInterval() doesn't work correctly?
Here's my code:- 

<!DOCTYPE html>
<html>
    <head>
        <title>Animtion</title>
        <link rel="icon" href="http://3.bp.blogspot.com/-xxHZQduhqlw/T-cCSTAyLQI/AAAAAAAAAMw/o48rpWUeg2E/s1600/html-logo.jpg" type="image/jpg">
        <script src="easyJs.js"></script>
        <style type="text/css">
            div{height:100px; width:100px; background:cyan;}
        </style>
    </head>


    <body onload="">
        <div id="demo"></div>
    </body>


    <script type="text/javascript">
        setInterval(function(){var x = new element('demo');
            x.resetPosition('absolute', '100px', '10px');}, 1000);
    </script>
</html>

Here's easyJs:- 

function element(elementId){
    this.myElement = document.getElementById(elementId);

    this.resetColor = changeColor;
    this.resetSize = changeSize;
    this.resetBackground = changeBackground;
    this.resetPosition = changePosition;
    this.resetBorder = changeBorder;
    this.resetFontFamily = changeFont;
    this.resetFontSize = changeFontSize;
    this.resetFontStyle = changeFontStyle;
    this.resetZindex = changeZindex;
    this.resetClass = changeClass;
    this.resetTitle = changeTitle;
    this.resetMarginTop = changeMarginTop;
    this.resetMarginLeft = changeMarginLeft;
    this.resetSource = changeSource;
    this.resetInnerHTML = changeInnerHTML;
    this.resetHref = changeHref;
    this.resetTextDecoration = changeTextDecoration;
    this.resetFontWeight = changeFontWeight;
    this.resetCursor = changeCursor;
    this.resetPadding = changePadding;
    this.getValue = getTheValue;
    this.getName = getTheName;
    this.getHeight = getTheHeight;
}

function changeColor(color){
    this.myElement.style.color = color;
}
function changeSize(height, width){
    this.myElement.style.height = height;
    this.myElement.style.width = width;
}
function changeBackground(color){
    this.myElement.style.background = color;
}
function changePosition(pos, x, y){
    this.myElement.style.position = pos;
    this.myElement.style.left = x;
    this.myElement.style.top = y;
}
function changeBorder(border){
    this.myElement.style.border = border;
}
function changeFont(fontName){
    this.myElement.style.fontFamily = fontName;
}
function changeFontSize(size){
    this.myElement.style.fontSize = size;
}
function changeZindex(indexNo){
    this.myElement.style.zIndex = indexNo;
}
function changeClass(newClass){
    this.myElement.className = newClass;
}
function changeTitle(newTitle){
    this.myElement.title = newTitle;
}
function changeMarginTop(top){
    this.myElement.style.marginTop = top;
}
function changeMarginLeft(left){
    this.myElement.style.marginLeft = left;
}
function changeSource(newSource){
    this.myElement.src = newSource;
}
function changeHref(newHref){
    this.myElement.href = newHref;
}
function changeInnerHTML(newHTML){
    this.myElement.innerHTML = newHTML;
}
function changeTextDecoration(decoration){
    this.myElement.style.textDecoration = decoration;
}
function changeFontWeight(weight){
    this.myElement.style.fontWeight = weight;
}
function changeFontStyle(style){
    this.myElement.style.fontStyle = style;
}
function changeCursor(cursor){
    this.myElement.style.cursor = cursor;
}
function changePadding(padding){
    this.myElement.style.padding = padding;
}
function getTheValue(){
    var theValue = this.myElement.value;
    return theValue;
}
function getTheName(){
    var theName = this.myElement.name;
    return theName;
}
function getTheHeight(){
    var theHeight = this.myElement.offsetHeight;
    return theHeight;
}

Upvotes: 1

Views: 1141

Answers (3)

user13500
user13500

Reputation: 3856

This might help you see what and how. (Scroll down to bottom of code):

Fiddle

// Create a new EasyJS object
var el = new element('demo');
// x and y position of element
var x = 0, y = 0;

// Interval routine
setInterval(function(){
    x = x + 1;  // Increment x by 1
    y = y + 1;  // Increment y by 1
    // Move element to position xy
    el.resetPosition('absolute', x + 'px', y + 'px');
    // Add text inside element showing position.
    el.resetInnerHTML(x + 'x' + y);

// Run five times every second
}, 1000 / 5);

Explanation of original code:

setInterval(function() {
    // Here you re-declare the "x" object for each iteration.
    var x = new element('demo');
    // Here you move the div with id "demo" to position 100x10
    x.resetPosition('absolute', '100px', '10px');

// Once every second
}, 1000);

The HTML div element demo initially has no positioning styling (CSS). As such it is rendered in the default position according to the browser defaults.

In first iteration you change the style option position to absolute. That means you can move it anywhere. Secondly you move it to offset 100x10.

On the second and every iteration after that the element has position set to absolute, and it reside at 100x10. Then you say it should be moved to 100x10 – as in same place as it is.

If you do not change either x or y position (left / top), it will stay at 100x10, no mather how many times you run the loop. Run it 100 times a second for a year and it will still be at 100x10 ;-)

Upvotes: 1

user70585
user70585

Reputation: 1417

The problem isn't in the setInterval, because a copypasta'd fiddle of the same expression worked properly, so it's probably either an issue with resetPosition or maybe easyJS, though I doubt the latter.

Also, it's unclear whether demo appears on-page, as it's not added anywhere visibly.

EDIT: If demo is appended somewhere behind the scenes, it's still piling a new demo on that spot every second

Upvotes: 0

Sterling Archer
Sterling Archer

Reputation: 22395

Think about it. Everytime the interval runs, it creates a new instance of element "demo".

This demo variable has all the default values your elements object sets it to (if any), and runs the same function each time. That's why it only moves once.

Hoist your element higher and you won't be re-declaring each interval.

<script type="text/javascript">
    var x = new element('demo');
    setInterval(function(){
        x.resetPosition('absolute', '100px', '10px');}, 1000);
</script>

Upvotes: 0

Related Questions