title: classList.add Does Not Work
body: <p>I'm trying to make a simple to-do list thing using JavaScript. Basically, you enter an item to the input field, it gets added to the list, you click it if it's complete, then it gets crossed. If you click on a list that's already crossed out, that removes that line. But while removing a line works, adding a line through is not working.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div&gt;&lt;input type="text" value="" id="new_task"&gt;&lt;button id="add_task"&gt;Add Task&lt;/button&gt;&lt;/div&gt;
  
      &lt;ul id="tasks"&gt;
          &lt;li class="completed selected"&gt;One Task&lt;/li&gt;
          &lt;li&gt;Two Task&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style type="text/css" media="screen"&gt;      
      /*local styles if any (quick tests and local only overrides)*/
  
      #tasks li{
          list-style: none;
      }
  
      #tasks .selected{
          list-style: disc;
      }
  
      .completed{
          text-decoration: line-through;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      var inputField = document.querySelector("#new_task");
      var myButton = document.querySelector("#add_task");
      var taskList = document.querySelector("#tasks");
      var newList = document.createElement("li"); 
      var completeTask = document.querySelector("li.completed.selected");
      var incompleteTask = document.querySelector("li:not([class])");
  
      myButton.onclick = function() {
  
      taskList.appendChild(newList);
      newList.innerHTML = inputField.value;
      inputField.value = "";
      }
  
      completeTask.onclick = function() {
      event.target.classList.remove("completed","selected");
      }
  
      incompleteTask.onclick = function() {
      event.target.classList.add("completed","selected");
      }
  
  
  
  
  &lt;/script&gt;
  </code></pre>