title: How to strikethrough text on a list element when a button is clicked?
body: <p>I'm super new to JS, HTML, and CSS. I've looked up many answers but can't quite understand the context when applied to my situation. Button 2 is what needs the onClick function, but I'm not sure how to implement the strikethrough aspect. Thank you!</p>
  <p>My JS goes as follows:</p>
  <pre><code>window.onload = function() {
      document.getElementById(&quot;submit-btn&quot;).addEventListener(&quot;click&quot;, function() {
              let text = document.getElementById(&quot;text-box&quot;).value;
              let li = document.createElement(&quot;li&quot;);
              li.id = &quot;liId&quot;;
              li.innerText = text;
              document.getElementById(&quot;unordered-list&quot;).appendChild(li);
              
              let button = document.createElement(&quot;button&quot;);
              button.innerText = &quot;X&quot;;
              button.setAttribute = (&quot;id&quot;, &quot;b1&quot;);
              li.appendChild(button);
              button.addEventListener(&quot;click&quot;, () =&gt; li.parentNode.removeChild(li));
              document.getElementById(&quot;unordered-list&quot;).appendChild(li);
              
              let button2 = document.createElement(&quot;button&quot;);
              button2.innerText = &quot;Done&quot;;
              button2.id = &quot;b2&quot;;
              li.appendChild(button2);
             
              li.appendChild(button);
              li.appendChild(button2);
      });
      document.getElementById(&quot;b2&quot;).addEventListener(&quot;click&quot;, function () {
      document.getElementById(&quot;liId&quot;).style = &quot;text-decoration: line-through;&quot;
  });
  }
  
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;
          &lt;title&gt;My First Project&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
          &lt;header id=&quot;to-do-box&quot;&gt;
              &lt;h1&gt;To-Do List&lt;/h1&gt;
              &lt;div id=&quot;top-half&quot;&gt;
                  &lt;form&gt;    
                  &lt;input type=&quot;text&quot; id=&quot;text-box&quot; placeholder=&quot;Add an item!&quot;&gt;
                  &lt;button type=&quot;button&quot; id=&quot;submit-btn&quot;&gt;Submit&lt;/button&gt;
                  &lt;button type=&quot;button&quot; id=&quot;clear-field-btn&quot;&gt;Clear field&lt;/button&gt;
                  &lt;/form&gt; 
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;div id=&quot;ul&quot;&gt;
              &lt;ul id=&quot;unordered-list&quot;&gt;&lt;/ul&gt;
          &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>