title: If I click on the list item, it toggles the .done class on and off
body: <p>I want to have an event that strikes through the text on my <code>li</code> </p>
  
  <p>My HTML   </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Javascript + DOM&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="5.3 style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Shopping List&lt;/h1&gt;
      &lt;p id="first"&gt;Get it done today&lt;/p&gt;
      &lt;input id="userinput" type="text" placeholder="enter items"&gt;
      &lt;button id="enter"&gt;Enter&lt;/button&gt;
      &lt;ul&gt;
          &lt;li class="bold red" random="23"&gt;Notebook&lt;/li&gt;
          &lt;li class="bold red"&gt;Jello&lt;/li&gt;
          &lt;li class="bold red"&gt;Spinach&lt;/li&gt;
          &lt;li class="bold red"&gt;Rice&lt;/li&gt;
          &lt;li class="bold red"&gt;Birthday Cake&lt;/li&gt;
          &lt;li class="bold red"&gt;Candles&lt;/li&gt;
      &lt;/ul&gt;
      &lt;script type="text/javascript" src="5.2 script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My CSS</p>
  
  <pre><code>.done {
    text-decoration: line-through;
  }
  </code></pre>
  
  <p>My JS</p>
  
  <pre><code> var list = document.getElementsByTagName("li");
   list.addEventListener("click", function(e){
   list.classList.toggle("done");
   })
  </code></pre>
  
  <p>I have tried:</p>
  
  <pre><code>var list = document.querySelector("li");
  </code></pre>
  
  <p>it only gets the first li obviously, so I tried
  <code>querySelectorAll</code> it isn't working it tells me the error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'toggle' of undefined"</p>
  </blockquote>