title: Get <li> element on click - vanilla JS
body: <p>I have a function that every time the user inserts a value in an input it adds a <code>&lt;li&gt;</code> element inside a <code>&lt;ul&gt;</code>.
  that same function creates the <code>&lt;li&gt;</code> with the attribute ( <code>onclick="doneToggle"</code> ).</p>
  
  <pre><code>function createListElement() {
      var li = document.createElement("li");
      ul.appendChild(li);
      li.appendChild(document.createTextNode(input.value));
      li.setAttribute("onclick", "doneToggle()")
      li.setAttribute("style", "width: fit-content")
      input.value = "";
  }
  </code></pre>
  
  <p>doneToggle is a function that I want to add a specific class to that element, that css class makes the text have a "line-through" style.</p>
  
  <p>so far this is the function</p>
  
  <pre><code>function doneToggle(element) {
      element.classList.toggle("done");
  }
  </code></pre>
  
  <p>I want that function to retrieve that clicked element and toggle its class without having to assign IDs to the <code>&lt;li&gt;</code>'s.
  Thank you in advance</p>