title: Why class selector is not created on click action?
body: <p>Below is the HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script type="text/javascript"&gt;
      var list = document.querySelector('ul');
      list.addEventListener('click', function(ev) {
          if (ev.target.tagName === 'LI') {
              ev.target.classList.toggle('done');
          }
      }, false);
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;ul&gt;
          &lt;li&gt;Buy milk&lt;/li&gt;
          &lt;li&gt;Take the dog for a walk&lt;/li&gt;
          &lt;li&gt;Exercise&lt;/li&gt;
          &lt;li&gt;Write code&lt;/li&gt;
          &lt;li&gt;Play music&lt;/li&gt;
          &lt;li&gt;Relax&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>below is the CSS code:</p>
  
  <pre><code>li {
    list-style-type: none;
    position: relative;
    margin: 2px;
    padding: 0.5em 0.5em 0.5em 2em;
    background: lightgrey;
    font-family: sans-serif;
  }
  
  li.done {
    background: #CCFF99;
  }
  
  li.done::before {
    content: '';
    position: absolute;
    border-color: #009933;
    border-style: solid;
    border-width: 0 0.3em 0.25em 0;
    height: 1em;
    top: 1.3em;
    left: 0.6em;
    margin-top: -1em;
    transform: rotate(45deg);
    width: 0.5em;
  }
  </code></pre>
  
  <p>Above HTML code does not create <code>class="done"</code> on click action, when launched on  browser.</p>
  
  <p>On <a href="https://jsfiddle.net/k1wgz8rx/" rel="nofollow">fiddle</a> the same code works fine.</p>