title: How to determine the winner in a race?
body: <p>I have created a program that places several nodes (which act as animals) on the screen; they're supposed to race eachother. Animal.js is the parent object of the four subclasses: cheetah.js, leopard.js and other subclasses which are similar</p>
  <p>This is the animal.js class, the constructor takes three arguments, <code>left</code> and <code>right</code> to set the start position, and <code>timeBetweenSteps</code> which is used to give each animal a random amount of milliseconds to reach the end of the race. To get to the end of the race the animate() method is used to set the animals <code>left</code> variable to 1380.</p>
  <p>This is the HTML:</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
  
      &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;title&gt;The Race&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;main.css&quot; /&gt;
      &lt;script src=&quot;lib/jquery.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;src/animal.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;src/cheetah.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;src/leopard.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;src/caracal.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;src/ocelot.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;div class=&quot;topbar&quot;&gt;
          &lt;span class=&quot;title&quot;&gt;The Race&lt;/span&gt;
          &lt;a href=&quot;#&quot; class=&quot;addAnimalButton&quot; id=&quot;cheetah&quot; data-animal-maker-function-name=&quot;Cheetah&quot;&gt;Add Cheetah&lt;/a&gt;
          &lt;a href=&quot;#&quot; class=&quot;addAnimalButton&quot; id=&quot;leopard&quot; data-animal-maker-function-name=&quot;Leopard&quot;&gt;Add Leopard&lt;/a&gt;
          &lt;a href=&quot;#&quot; class=&quot;addAnimalButton&quot; data-animal-maker-function-name=&quot;Caracal&quot;&gt;Add Caracal&lt;/a&gt;
          &lt;a href=&quot;#&quot; class=&quot;addAnimalButton&quot; data-animal-maker-function-name=&quot;Ocelot&quot;&gt;Add Ocelot&lt;/a&gt;
          &lt;div class=&quot;button&quot;&gt;
              &lt;button class=&quot;get-ready&quot;&gt;Get Ready&lt;/button&gt;
              &lt;button class=&quot;startRace&quot; onclick=&quot;&quot;&gt;Start&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
      &lt;span class=&quot;race-info&quot;&gt;&lt;/span&gt;
      &lt;script src=&quot;src/init.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>
  <p>This is the animal class:</p>
  <pre><code>    var Animal = function(top, left, timeBetweenSteps) {
      this.$node = $('&lt;span class=&quot;animal&quot;&gt;&lt;/span&gt;');
      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);
      };
  
      Animal.prototype.getReady = function() {
      var trackWidth = 1380;
      var raceTime = this.timeBetweenSteps;
      this.$node.animate({
          left: trackWidth,
      }, raceTime, function() {
          console.log(this.$node + &quot; completed race in &quot; + raceTime + &quot; Milliseconds&quot;) //This logs the amount of milliseconds it took each node to complete the race, but I need to show the winner who completed it in the least amount of time possible
  
      })
      }
  </code></pre>
  <p>This is the Leopard.js subclass:</p>
  <pre><code>    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', &quot;orange&quot;); //styles animal/div
      }
  
  And all the code is run from an init.js file. Here there's an array that stores all the added animals.
  
      /*
  When this complete page loads into memory if any of the addAnimalButton is clicked, make an animal object based on the type of object desired.
  Add that object to the window content area.
  
      */
  
  
      $(document).ready(function() {
      var arr = window.animals = []; //This is the array
  
      $('.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 &quot;data-animal-maker-function-name&quot; attribute of a
           * class=&quot;addAnimalButton&quot; 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(
              $(&quot;#content&quot;).height() * Math.random(), //sets the top
              $(&quot;#content&quot;).width() * Math.random(), //set the left
              Math.floor((Math.random() * 5000) + 1) //gives random time speed to each animal
          );
  
          $('body').append(animal.$node); //places animal on page window
          window.animals.push(animal); //pushes all added animals to array
  
          console.log(arr)
  
      });
  
      $(&quot;.get-ready&quot;).click(function() { //Sets all animals on the screen to line up vertically
          let top = 50;
          arr.forEach(animal =&gt; animal.setPosition(top += 60, 10))
      })
      $(&quot;.startRace&quot;).click(function() { //Once start button is clicked, //the animals &quot;run&quot; 
      until they cross the line
          arr.forEach(function(animal) {
              animal.getReady()
          })
      })
  
      });
  </code></pre>
  <p>So how do I determine the winner of the race? Who completed the race in the least time possible?</p>
  <p>Also, <code>this.$node</code> prints &quot;undefined&quot;, why is that?</p>
  <pre><code>console.log(this.$node + &quot; completed race in &quot; + raceTime + &quot; Milliseconds&quot;)
  </code></pre>
  <p><a href="https://i.stack.imgur.com/UYNIM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UYNIM.png" alt="This image shows the different animals and the times in which they completed the race" /></a></p>
  <p>990 milliseconds will be the winner.</p>