This code takes 8 divs and races them across the screen depending on which time value the div was assigned. How can I have coded this better so my code doesn't look so amateurish?I know I should have used something other than a hard coded 8 in my for-loop, but timeArray.length is unavailable since I am removing items from the array with splice.$(document).ready(function() {var timeArray = new Array(3,4,5,6,7,8,9,10);var shortestTime = timeArray[7];var fastestPony = {};var index;var pony = {    name: pony,    raceTime: -1,    selected: };//change the color of the pony when the user clicks on it$('.pony').bind('click', function() {    $('.pony').removeClass('selectedPony');    $(this).addClass('selectedPony');    //get the pony that the user selected    pony.selected = $(this);});$('#startButton').click(function() {     if (pony.selected == ) {        alert(Please click the pony you think will win the race.);    }    else {        for (i = 1; i <= 8; i++) {           //get a random number from the timeArray            index = Math.floor(Math.random() * timeArray.length);            pony.raceTime = timeArray[index];            //pull the random race time number out of the array             //so it can't be assigned to another horse            timeArray.splice(index, 1);            //get the fastest pony            if (pony.raceTime < shortestTime) {                shortestTime = pony.raceTime;                fastestPony = $('#pony' + i);            }            //award the winner after the ponies have reached the finish line            if (i == 8) {                fastestPony.addClass('winner').append(' - Winner!');            }            //send the horses on their way to race!            $('#pony' + i).animate({left: '320px'}, pony.raceTime * 1000);        }    }});//reset the ponies back to the starting line by reloading the page$('#resetButton').click(function() {    document.location.reload(true);});});
Reading 8 divs across the screen depending on assignment time
javascript;jquery