title: Highlight text button in javascript
body: <p>Doing NLP using the Vader sentiment analysis tool, I'm working on a basic interface to show opinion oriented words in a text. </p>
  
  <p>I got the output in HTML and I would like a button to toggle the highlight of those words in the document (noted by the <code>span</code> tag.
  I tried to follow the work of <a href="https://stackoverflow.com/questions/47244187/toggle-button-text-and-paragraph-background">this post</a> but the script doesn't work for this code.</p>
  
  <p>Is there any way I could make it work ?</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>document.getElementById("button").addEventListener("click", function() {
    [].forEach.call(document.querySelectorAll("td"), td =&gt; {
      p.classList.toggle("highlight");
    });
    this.innerHTML = (this.innerHTML === "Highlight") ? "Unhighlight" : "Highlight";
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.blue_1 { background-color:#a5c7fd; }
  .blue_2 { background-color:#8ab7ff; }
  .blue_3 { background-color:#609bfa; }
  .blue_4 { background-color:#3682fc; }
  .blue_5 { background-color:#136cfc; }
  
  .red_1 { background-color:#fca8a8; }
  .red_2 { background-color:#fa7e7e; }
  .red_3 { background-color:#fa5e5e; }
  .red_4 { background-color:#f83c3c; }
  .red_5 { background-color:#fc1313; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;table style="width:80%" border ="1"&gt;
      &lt;tr&gt;
        &lt;td width="70%"&gt;
          The book is 
          &lt;span class="blue_3"&gt;smart,&lt;/span&gt;&amp;nbsp;
          &lt;span class="blue_5"&gt;handsome,&lt;/span&gt;
          &amp;nbsp;and&amp;nbsp;
          &lt;span class="blue_4"&gt;funny.&lt;/span&gt;
          &lt;br&gt;
          The book is &lt;span class="red_3"&gt;terrible &lt;br&gt;&lt;/span&gt;  
          The book was &lt;span  class="blue_1"&gt;good., &lt;/span&gt; &lt;br&gt; 
          Today &lt;span class="red_4"&gt;SUX&lt;/span&gt;!, &lt;br&gt; 
          Today only kinda &lt;span class="red_4"&gt;sux!&lt;/span&gt; &lt;br&gt; 
          But I'll get by, &lt;span  class="blue_3"&gt;lol,&lt;/span&gt; &lt;br&gt; 
        &lt;/td&gt;
        &lt;td&gt;
          &lt;button id="button"&gt;Highlight&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>