Question

I’m pretty new to JavaScript, I’m trying to recreate this code here:

The Effect:
http://www.clicktorelease.com/code/css3dclouds/

Tutorial:
http://www.clicktorelease.com/tutorials/css3dclouds/#creating_a_world_and_a_camera

Uncaught SyntaxError: Unexpected identifier

For some reason something is wrong on my line 25, and I’m not sure what it is:

    /*
        Clears the DOM of previous clouds bases 
        and generates a new set of cloud bases
    */
    function generate() {
        objects = [];
        layers = [];
        if ( world.hasChildNodes() ) {
            while ( world.childNodes.length >= 1 ) {
                world.removeChild( world.firstChild );       
            }
        }
        for( var j = 0; j <; 5; j++ ) {
            objects.push( createCloud() );
        }
    }

Full JavaScript:

(function() {

window.onload = function() {


    /*
        objects is an array of cloud bases
        layers is an array of cloud layers
    */
    var objects = [],
        layers = [];

    /*
        Clears the DOM of previous clouds bases 
        and generates a new set of cloud bases
    */
    function generate() {
        objects = [];
        layers = [];
        if ( world.hasChildNodes() ) {
            while ( world.childNodes.length >= 1 ) {
                world.removeChild( world.firstChild );       
            }
        }
        for( var j = 0; j <; 5; j++ ) {
            objects.push( createCloud() );
        }
    }

    /*
        Creates a single cloud base and adds several cloud layers.
        Each cloud layer has random position ( x, y, z ), rotation (a)
        and rotation speed (s). layers[] keeps track of those divs.
    */
    function createCloud() {

        var div = document.createElement( 'div'  );
        div.className = 'cloudBase';
        var t = 'translateX( ' + random_x + 'px ) \
            translateY( ' + random_y + 'px ) \
            translateZ( ' + random_z + 'px )';
        div.style.transform = t;
        world.appendChild( div );

        for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) {
            var cloud = document.createElement( 'div' );
            cloud.className = 'cloudLayer';

            cloud.data = { 
                x: random_x,
                y: random_y,
                z: random_z,
                a: random_a,
                s: random_s
            };
            var t = 'translateX( ' + random_x + 'px ) \
                translateY( ' + random_y + 'px ) \
                translateZ( ' + random_z + 'px ) \
                rotateZ( ' + random_a + 'deg ) \
                scale( ' + random_s + ' )';
            cloud.style.transform = t;

            div.appendChild( cloud );
            layers.push( cloud );
        }

        return div;
    }

    /*
        Iterate layers[], update the rotation and apply the
        inverse transformation currently applied to the world.
        Notice the order in which rotations are applied.
    */
    function update (){

        for( var j = 0; j < layers.length; j++ ) {
            var layer = layers[ j ];
            layer.data.a += layer.data.speed;
            var t = 'translateX( ' + layer.data.x + 'px ) \
                translateY( ' + layer.data.y + 'px ) \
                translateZ( ' + layer.data.z + 'px ) \
                rotateY( ' + ( - worldYAngle ) + 'deg ) \
                rotateX( ' + ( - worldXAngle ) + 'deg ) \
                scale( ' + layer.data.s + ')';
            layer.style.transform = t;
        }

        requestAnimationFrame( update );

    }


}; //-window.onload

}());

Answer 1

You’re missing a value in your loop (i.e. you have an extra ;):

for (var j = 0; j < ; 5; j++)

Probably should be

for (var j = 0; j < 5; j++)