CODEWITHSUNDEEP
javascriptjquerycss
clusterBuddy
clusterBuddy

Reputation: 1554

javascript function rotate element => trying to set an IF condition for a specific parameter passed in

I need to rotate 2 div blocks, one clockwise and the other one CCW. I already have the first one set, and with var STEP I can choose which direction by giving it positive/negative values. Now since I already know the ID of the 2nd div parameter startUpProc('fourSquares3'), I tried to create an if statement that checks if the parameter 'fourSquares3' is passed and set the global var STEP to an opposite value (let's say positive in this case) and it's just not working, even with the if , at the end when I run it, they both turn the same way.

So my question is: how can I properly change the code so that if a specific parameter is passed, it wil turn the CCW.

This is my code:

startUpProc('fourSquares');


var STEP = -7;

function startUpProc(id)
{
    var log = window.document.getElementById(id);
    makeCircle(log, 0);
}

function makeCircle(item, targetAngle) {
    changeRotate(item, targetAngle);

    if (targetAngle < 720) {
        setTimeout(function (){
            makeCircle(item, targetAngle + STEP);
        }, 80);
    }
}

function changeRotate(item, val)
{
    item.style.transform = "rotate(" + val + "deg)";
    item.style.webkitTransform = "rotate(" + val + "deg)";
    item.style.mozTransform = "rotate(" + val + "deg)";
    //alert(item.style.transform);
}

Upvotes: 2

Views: 535

Answers (2)

hindmost
hindmost

Reputation: 7195

The issue is that you use the same variable (STEP) which value is shared between two blocks (divs). You have to encapsulate this variable into the code doing rotation. The easiest way to do it is use closures.

In your case you have to place declaration of STEP as well as all subroutine functions which use it inside startUpProc function. This ensures that each instance (call) of startUpProc will deal with its own instance of variable. Furthermore it is better to determine type of direction by CSS class, not by ID. This makes your code more flexible, not dependent on fixed ID values. Also it allows to use this code for multiple blocks (3 and more), not only for two as in your example.

var classCcw = 'ccw'; // class indicating counter-clockwise direction

function startUpProc(id)
{
    var log = window.document.getElementById(id);
    var isCcw = (' '+log.className+' ').indexOf(' '+classCcw+' ') >= 0;
    var STEP = isCcw? 7 : -7;
    makeCircle(log, 0);

    function makeCircle(item, targetAngle) {
        changeRotate(item, targetAngle);

        if (targetAngle < 720) {
            setTimeout(function (){
                makeCircle(item, targetAngle + STEP);
            }, 80);
        }
    }

    function changeRotate(item, val)
    {
        item.style.transform = "rotate(" + val + "deg)";
        item.style.webkitTransform = "rotate(" + val + "deg)";
        item.style.mozTransform = "rotate(" + val + "deg)";
        //alert(item.style.transform);
    }
}

startUpProc('square1');
startUpProc('square2');
startUpProc('square3');

HTML code sample:

<div id="square1" class="ccw">
<div id="square2">
<div id="square3" class="ccw">

Upvotes: 1

Ziv Weissman
Ziv Weissman

Reputation: 4516

All of your call to the function will use the same instance of your varible STEP, If you change it, they will all change.

If you want diffrent directions you must seperate it, Something like this:

function makeCircle(item, targetAngle) {
    changeRotate(item, targetAngle);
    var direction = 1;
    //condition 
    if (item=='whatver') 
      direction = -1;
    if (targetAngle < 720) {
        setTimeout(function (){
            makeCircle(item, targetAngle + STEP * direction);
        }, 80);
    }
}

Upvotes: 0

Related Questions