title: I want to toggle .textDecoration class when I am clicking on "ALL" h1 elements. Can you Help me with this Code?
body: <p>I can only access the first element in h1. I also can create a button and click loop through h1 elements and switch on or off .textDecoration class. But my aim is to click which element I want step by one and switch on or off .textDecoration class.</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>var x = document.getElementsByTagName("h1")[0];
  
  function myFunction() {
  
    x.classList.toggle("textDecoration");
  }
  
  x.addEventListener("click", myFunction);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.textDecoration {
    text-decoration: line-through;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Text-Decoration: line-through&lt;/h1&gt;
  &lt;h1&gt;Text-Decoration: line-through&lt;/h1&gt;
  &lt;h1&gt;Text-Decoration: line-through&lt;/h1&gt;
  &lt;h1&gt;Text-Decoration: line-through&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>