title: Uncaught TypeError: Cannot read property 'append' of undefined
body: <p>I am getting this error </p>
  
  <p>Uncaught TypeError: Cannot read property append of undefined. </p>
  
  <p>I can't figure it out what am I doing wrong because I am using $(document).ready(). </p>
  
  <p>But somehow the code is still getting called before DOM gets created.</p>
  
  <p>The error occurs where I try to append lists to an existing unordered list on the DOM.</p>
  
  <p>Here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Cat Clicker&lt;/title&gt;
      &lt;!-- &lt;link rel="stylesheet" href="css/style.css"&gt; --&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;ul id='cat-list' style="display: inline;"&gt;&lt;/ul&gt;
      &lt;div id="cat"&gt;
          &lt;h2 id="cat-name"&gt;&lt;/h2&gt;
          &lt;div id="cat-count"&gt;&lt;/div&gt;
          &lt;img id="cat-img" src="" alt="cat"&gt;
      &lt;/div&gt;
      &lt;div id="main"&gt;
      &lt;/div&gt;
  
      &lt;script src="js/libs/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function(){
  
  /* ======= Model ======= */
  
      var model = {
          currentCat: null,
          cats: [
              {
                  clickCount : 0,
                  name : 'Tabby',
                  imgSrc : 'img/434164568_fea0ad4013_z.jpg',
                  imgAttribution : 'https://www.flickr.com/photos/bigtallguy/434164568'
              },
              {
                  clickCount : 0,
                  name : 'Tiger',
                  imgSrc : 'img/4154543904_6e2428c421_z.jpg',
                  imgAttribution : 'https://www.flickr.com/photos/xshamx/4154543904'
              },
              {
                  clickCount : 0,
                  name : 'Scaredy',
                  imgSrc : 'img/22252709_010df3379e_z.jpg',
                  imgAttribution : 'https://www.flickr.com/photos/kpjas/22252709'
              },
              {
                  clickCount : 0,
                  name : 'Shadow',
                  imgSrc : 'img/1413379559_412a540d29_z.jpg',
                  imgAttribution : 'https://www.flickr.com/photos/malfet/1413379559'
              },
              {
                  clickCount : 0,
                  name : 'Sleepy',
                  imgSrc : 'img/9648464288_2516b35537_z.jpg',
                  imgAttribution : 'https://www.flickr.com/photos/onesharp/9648464288'
              }
          ]
      };
  
  
      /* ======= Octopus ======= */
  
      var octopus = {
  
          init: function() {
              // set our current cat to the first one in the list
              model.currentCat = model.cats[0];
  
              // tell our views to initialize
              catListView.init();
              catView.init();
          },
  
          getCurrentCat: function() {
              return model.currentCat;
          },
  
          getCats: function() {
              return model.cats;
          },
  
          // set the currently-selected cat to the object passed in
          setCurrentCat: function(cat) {
              model.currentCat = cat;
          },
  
          // increments the counter for the currently-selected cat
          incrementCounter: function() {
              model.currentCat.clickCount++;
              catView.render();
          }
      };
  
  
      /* ======= View ======= */
  
      var catView = {
  
          init: function() {
              // store pointers to our DOM elements for easy access later
              this.catElem = $('#cat');
              this.catNameElem = $('#cat-name');
              this.catImageElem = $('#cat-img');
              this.countElem = $('#cat-count');
  
              // on click, increment the current cat's counter
              this.catImageElem.on('click', function(){
                  octopus.incrementCounter();
              });
  
              // render this view (update the DOM elements with the right values)
              this.render();
          },
  
          render: function() {
              // update the DOM elements with values from the current cat
              var currentCat = octopus.getCurrentCat();
              this.countElem.text(currentCat.clickCount);
              this.catNameElem.text(currentCat.name);
              this.catImageElem.attr('src', currentCat.imgSrc);
          }
      };
  
      var catListView = {
  
          init: function() {
              // store the DOM element for easy access later
              this.catListElem = $('#cat-list');
  
              // render this view (update the DOM elements with the right values)
              this.render();
          },
  
          render: function() {
              // get the cats we'll be rendering from the octopus
              var cats = octopus.getCats();
  
              // empty the cat list
              this.catListElem.html('');
              $.each(cats, function(i, cat){
                  var list = $('li');
                  this.catListElem.append(list);
                  list.text(cat.name);
                  list.on('click', (function(catCopy){
                      octopus.setCurrentCat(catCopy);
                      catView.render();
                  }(cat)));
              });    
          }
      };
  
      // make it go!
      octopus.init();
  }());
  </code></pre>