title: JS - How to select and line-through the items in html list by pressing on a button?
body: <p>I'm just starting to learn JS and collided with a specific task that i dont understand how to solve.</p>
  
  <p>Suppose we have a page that has a list, and there is a button with which I can supplement this list with new cases.
   The problem that I encountered:
   I need to implement a function in a certain way that will change the style of the selected line from the list of all existing and added elements.</p>
  
  <p> For example, if our list - "a list of things that we have to do", i need to make so that the user can press the "Done" button, and select the desired line. After the selection the selected line gets a line-through. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addItemToTheList() {
    var newItem = document.createElement("li");
    var input = document.getElementById("Input");
    newItem.innerHTML = input.value;
    input.value = "";
    document.getElementById("todo").appendChild(newItem);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#todo {
    font-family: Arial;
  }
  
  #todo .done {
    color:gray;
    text-decoration:line-through;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt; How can user change added and predefined elements in the list?&lt;/title&gt;
    &lt;/head&gt;
  &lt;pre&gt;
  &lt;input type = "text" id = "Input" maxlength = "42" size = "42" placeholder = " Add a task here"&gt;  &lt;input 
  type = "button" value = "Add" onclick = "addItemToTheList()"&gt;
  
  &lt;/pre&gt;
   &lt;hr align = "left" width = "378"&gt;
    &lt;body&gt;
      &lt;div id = "todoList"&gt;
       &lt;ol id = "todo"&gt;
          &lt;li class = "done"&gt; Watch all seasons of "Game of Thrones"&lt;/li&gt;
          &lt;li class = "done"&gt; Write a book&lt;/li&gt;
          &lt;li class = "undone"&gt; Learn "JS"&lt;/li&gt;
        &lt;/ol&gt; 
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Would anybody be willing to point me in the right direction?</p>