Invoking a function, by traversing an array of objects

Question

I'm using prototypal inheritance in javascript. The parent class is an animal and an example of one of the child classes is a cheetah. All of the child classes have a function that is supposed to use the jQuery animate function to move the animals across the screen but I have to invoke it using a for loop in my init.js file. How do I do this?

This is the question: Start the race – add a start button to your interface which makes sure that all objects are lined up on one side of your screen and start moving across the screen at a pace decided by their speed variables. NOTE: Remember you have access to a global array of all the animals created in your application - (it's defined in src/init.js ) so you can loop through that array and tell each object to getReady . You'll need to add a getReady method to each of your animal types. Note that not all animals have to get ready in the exact same way but they must all move towards the start position when getReady is invoked after the start button is clicked.

This is the init.js file

$(document).ready(function() {
var arr = window.animals = []; This is the array that all the animal objects are 
added to

$('.addAnimalButton').on('click', function(event) {
    /* This function sets up the click handlers for the create-animal
     * buttons on track.html. You should only need to make one small change to it.
     * As long as the "data-animal-maker-function-name" attribute of a
     * class="addAnimalButton" DOM node matches one of the names of the
     * maker functions available in the global scope, clicking that node
     * will call the function to make the animal.
     */

    /* animalMakerFunctionName is a string which must match
     * one of the animal maker functions available in global scope.
     * A new object of the given type will be created and added
     * to the stage.
     */
    var animalMakerFunctionName = $(this).data('animal-maker-function-name');

    // get the maker function for the kind of animal we're supposed to make
    var animalMakerFunction = window[animalMakerFunctionName];

    // make an animal with a random position

    var animal = new animalMakerFunction(
        $("body").height() * Math.random(),
        $("body").width() * Math.random(),
        Math.random() * 1000
    );

    $('body').append(animal.$node);
    window.animals.push(animal);

    for (var animalType in arr) {
        console.log(animalType instanceof Animal)
    }

    var get_readyBtn = document.querySelector(".get-ready");
    var body = document.querySelector("body");
    $(get_readyBtn).click(function() {
        animal.$node.css({
            'left': '10px',
            'width': '60px',
            'height': '60px'
        })
    })

});
});

This is the Animal/parent class

var Animal = function(top, left, timeBetweenSteps) {
this.$node = $('<span class="animal"></span>');
this.top = top;
this.left = left;
this.timeBetweenSteps = timeBetweenSteps;
this.step();
this.setPosition(this.top, this.left);
};

Animal.prototype.step = function() {
setTimeout(this.step.bind(this), this.timeBetweenSteps);
};

Animal.prototype.setPosition = function(top, left) {
this.position = {
    top: top,
    left: left
};
this.$node.css(this.position);
};

This is one of the subclasses, they're all the same. This one is for a Leopard.

var Leopard = function(top, left, timeBetweenSteps) {
Animal.call(this, top, left, timeBetweenSteps);
}

Leopard.prototype = Object.create(Animal.prototype);

Leopard.prototype.constructor = Leopard;

Leopard.prototype.step = function() {
Animal.prototype.step.call(this);
this.$node.css('background-color', "orange"); //styles animal/div
}

var trackWidth = $(window).width(); //Used to get the width of the window


var raceTime = Math.floor((Math.random() * 5000) + 1) //Created to give each animal a 
new 
racing time, everytime the race is run

var startBtn = document.querySelector(".startRace"); //This function is supposed to 
move. This is the function that must be called using the loop in the init.js file
once the start button is clicked the animal moves the width of the window
$(startBtn).click(function() {
animal.$node.animate({
    left: trackWidth,
}, raceTime)
})