title: Modify list item on click with Javascript dynamically
body: <p>I'm trying to create a basic to-do list in Javascript. I have basically zero experience with this language, so I'm trying to keep it as basic as possible. I want to have the appearance of the list item change when the user clicks on it (have a line strike through the text, for example). I've been using other sources for some of the JavaScript, but for some reason it isn't working with my code.</p>
  
  <p>Here are the problem spots.</p>
  
  <pre><code>&lt;script&gt;
  var list = document.querySelector('ul');
  list.addEventListener('click', function(ev) {
     if (ev.target.tagName === 'LI') {
     ev.target.classList.toggle('checked');
    }
  }, false); 
  &lt;/script&gt;
  
  &lt;html&gt;
  &lt;ul id = "toDoList"&gt;
      &lt;li id = "checked"&gt;Do laundry&lt;/li&gt;
      &lt;li&gt;Wash car&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.checked {
      text-decoration: line-through;
  }
  </code></pre>
  
  <p>If someone could help me solve this problem, that would be awesome! (also, steer clear from JQuery, I don't know anything about it.)</p>