title: javascript addEventlistener "click" not working
body: <p>I am working on making a To-Do list as a Chrome new tab extension.</p>
  
  <p>My html file:
      
      </p>
  
  <pre><code>&lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h2 id="toc-final"&gt;To Do List&lt;/h2&gt;
      &lt;ul id="todoItems"&gt;&lt;/ul&gt;
      &lt;input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;"&gt;
      &lt;button id="newitem" value="Add Todo Item"&gt;Add&lt;/button&gt;
  
      &lt;script type="text/javascript" src="indexdb.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Previously the button element was an input type with onClick(), but Chrome does not allow that. So I had to make a javascript function that will fire when it's clikced. In my indexdb.js:</p>
  
  <pre><code>var woosToDo = {};
      window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
                      window.mozIndexedDB;
  
      woosToDo.indexedDB = {};
      woosToDo.indexedDB.db = null;
  
      window.addEventListener("DOMContentLoaded", init, false);
  
      window.addEventListener('DOMContentLoaded', function () {
        document.getElementById("newitem").addEventListener("click", addTodo(), false);
      });
  
  ...
  ...
  
      function addTodo() {
        var todo = document.getElementById("todo");
        woosToDo.indexedDB.addTodo(todo.value);
        todo.value = "";
      }
  </code></pre>
  
  <p>Why is nothing happening when I click the button w/ id="newitem" ?</p>