Javascript else if

Question

Ok. I'll try to be short, as my JS abilities definitely are. Nonetheless I'm proud of this piece of code (my first) and I hope it could be of some use for anyone. It has a minor flaw and I'm asking your help to fix it. The whole code is a CSS animation, JS directed.

So, i have a list of images that display into a div. Animation consists in images dismembering into elements that scales away in a 5x5 grid. An aesthetic point would be to randomize the "transform origin" of this scaling away. I want to define the limits of these randomization depending on to which row and column the element belongs. So, this is the troubling code:

    // begin the new animation process

function startChange(){
    var parts = document.getElementsByClassName('parts');
    for (i=0; i<parts.length; i++){

//this part checks if there is a match between element.ClassName and Class corresponding to Rows or columns

var string = parts[i].className, p = string.indexOf("primera") > -1, s = string.indexOf("segunda") > -1, 
            t = string.indexOf("tercera") > -1, c = string.indexOf("cuarta") < -1, q = string.indexOf("quinta") < -1, 
            f = string.indexOf("first") < -1, se = string.indexOf("second") < -1, th = string.indexOf("third") < -1, 
                fo = string.indexOf("fourth") < -1, fi = string.indexOf("fifth") < -1;
        if (p == true){
            y = randomFromTo(0,500);
            }
        else if(s == true){
            y = randomFromTo(-100,400);
        }       
        else if(t == true){
            y = randomFromTo(-200,300);
        }       
        else if(c == true){
            y = randomFromTo(-300,200);
        }               
        else { //i guess this is the problematic line
            y = randomFromTo(-400,100);
        }

        if (f == true){
            x = randomFromTo(0,500);
            }
        else if(se == true){
            x = randomFromTo(-100,400);
        }       
        else if(th == true){
            x = randomFromTo(-200,300);
        }       
        else if(fo == true){
            x = randomFromTo(-300,200);
        }               
        else{
            x = randomFromTo(-400,100);
        }
        parts[i].style.webkitTransformOrigin = +x+"%"+y+"%";
    }
}

// get a random number integer between two low/high extremes

function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}

(function () {
function callStartChange() {
    startChange();
    setTimeout(callStartChange, 10000);
}
// And now start the process:

setTimeout(callStartChange, 10000);
})();

As I said, I guess the problematic line is the "else" statement that sorts of breaks the loop. But if I convert that to an "else if", it turns out that if condition for y is met, then script wont calculate it for x (which makes sense). So.. Any ideas on how to solve this issue? I guess more experienced users will think this is a piece of cake. Thanks in advance.

Here, the JSFiddle:

http://jsfiddle.net/Sourcerer/a3y52/1229/

Thanks again everybody! :)

Listen to your console `Uncaught SyntaxError: Unexpected token else` — Jonathan, Feb 06 '16 at 16:40
@Drew Kennedy Sorry.. Editing the code.. That was a typing error — Sourcerer, Feb 06 '16 at 16:45
`c = string.indexOf("cuarta") < -1,` that is very unusual, because it makes no sense. — Nina Scholz, Feb 06 '16 at 16:46
@Jonathan Apparently not just a typing mistake, but that "unexpected token else" is missing in my chrome console.. — Sourcerer, Feb 06 '16 at 16:48
@NinaScholz I know it is.. Maybe because you would compare a substring? But i found it worked this way without defining it as a variable, got the idea here: http://stackoverflow.com/questions/1789945/how-can-i-check-if-one-string-contains-another-substring — Sourcerer, Feb 06 '16 at 16:54
but it is wrong either. the sting is in the other string, then the result is 0 or positive, or if not then it is -1. --> test case `if (a.indexOf('x') > -1) {` read **bigger**, or `if (a.indexOf('x') !== -1) {` or if not found `if (a.indexOf('x') === -1) {` or `if (a.indexOf('x') < 0) {` read **smaller** than zero. *but never smaller than -1*. — Nina Scholz, Feb 06 '16 at 17:01
I've just corrected that and it works perfectly.. Thanks everybody and specially Nina, this was what didn't work from the beggining.. You are a heaven! — Sourcerer, Feb 06 '16 at 17:08

score 1 · Accepted Answer · answered Feb 06 '16 at 17:29

Just a little improvement with a different control structure switch.

~ is a bitwise not operator. It is perfect for use with indexOf(), because indexOf returns if found the index 0 ... n and if not -1:
value  ~value   boolean
 -1  =>   0  =>  false
  0  =>  -1  =>  true
  1  =>  -2  =>  true
  2  =>  -3  =>  true
  and so on 

function startChange() {
    var parts = document.getElementsByClassName('parts');
    for (i = 0; i < parts.length; i++) {
        var string = parts[i].className;
        switch (true) {
            case ~string.indexOf("primera") || ~string.indexOf("first"):
                y = randomFromTo(0, 500);
                break;
            case string.indexOf("segunda") || ~string.indexOf("second"):
                y = randomFromTo(-100, 400);
                break;
            case ~string.indexOf("tercera") || ~string.indexOf("third"):
                y = randomFromTo(-200, 300);
                break;
            case ~string.indexOf("cuarta") || ~string.indexOf("fourth"):
                y = randomFromTo(-300, 200);
                break;
            case ~string.indexOf("quinta") || ~string.indexOf("fourth"):
                y = randomFromTo(-400, 100);
                break;
            default:
                // some fall back here
        }
        parts[i].style.webkitTransformOrigin = +x + "%" + y + "%";
    }
}

Javascript else if

1 Answers1