title: Error in javascript: object is not a function
body: <p>When I run my code below then it shows error <code>object is not a function</code> in console. This error  is on this line <code>var todo = new Todo('contents');</code> in my <code>script.js</code> file. How can I make it work?</p>
  
  <p>Here is my todo.js file</p>
  
  <pre><code>var Todo = (function(c) {
  var contents = $('.' + c);
  
  var showel = function (d) {
      contents.prepend(d);
  },
  
  add = function (name) {
      if(name != "") {
          var div = $('&lt;div class="names"&gt;&lt;/div&gt;')
          .append('&lt;span&gt;' + name + '&lt;/span&gt;')
          .append("&lt;button class='update' class='update'&gt;Edit&lt;/button&gt;")
          .append("&lt;button class='remove' name='remove'&gt;Remove&lt;/button&gt;");
      }
  
      return showel(div);
  },
  
  addUpdateField = function (dom) {
      var name = dom.parent().find('span').text(),
          field = $('&lt;input type="text" value="' + name + '" /&gt;'),
          update = $('&lt;button class="updateBtn"&gt;Update&lt;/button&gt;');
      dom.parent().html('').append(field).append(update);
  
      return;
  },
  
  update = function(el) {
      var val = el.parent().find('input').val();
      el.parent().html('&lt;span&gt;' + val + '&lt;/span&gt;')
      .append('&lt;button class="update" class="update"&gt;Edit&lt;/button&gt;')
      .append('&lt;button class="remove" class="remove"&gt;Remove&lt;/button&gt;');
  
      return;
  },
  
  remove = function (el) {
      return el.remove();
  };
  
  return {
      add             : add,
      update          : update,
      remove          : remove,
      addUpdateField  : addUpdateField
  };
  })();
  </code></pre>
  
  <p>here is my script.js file</p>
  
  <pre><code>$(function () {
  var todo = new Todo('contents');
  
  $('.addBtn').on('click', function() {
      var name = $(this).parent().find('input[type="text"]').val();
      todo.add(name);
  });
  
  $('.contents').on('click', '.remove', function() {
      var el = $(this).parent();
      todo.remove(el);
  });
  
  $('.contents').on('click', '.update', function() {
      var dom = $(this);
      todo.addUpdateField(dom);
  });
  
  $('.contents').on('click', '.updateBtn', function() {
      var el = $(this);
      todo.update(el);
  });
  
  });
  </code></pre>
  
  <p><strong>here is html code</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;    &lt;/script&gt;
  &lt;script type="text/javascript" src="todo.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;label&gt;Name&lt;/label&gt;
      &lt;input type="text" class="name" name="name" /&gt;
      &lt;input type="button" class="addBtn" name="add" value="Add" /&gt;
      &lt;div class="contents"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>