Doing NLP using the Vader sentiment analysis tool, I'm working on a basic interface to show opinion oriented words in a text.
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 span tag.
I tried to follow the work of this post but the script doesn't work for this code.
Is there any way I could make it work ?
document.getElementById("button").addEventListener("click", function() {
[].forEach.call(document.querySelectorAll("td"), td => {
p.classList.toggle("highlight");
});
this.innerHTML = (this.innerHTML === "Highlight") ? "Unhighlight" : "Highlight";
}).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; }<body><table style="width:80%" border ="1"><tr><td width="70%">
The book is <span class="blue_3">smart,</span> <span class="blue_5">handsome,</span> and <span class="blue_4">funny.</span><br>
The book is <span class="red_3">terrible <br></span>
The book was <span class="blue_1">good., </span> <br>
Today <span class="red_4">SUX</span>!, <br>
Today only kinda <span class="red_4">sux!</span> <br>
But I'll get by, <span class="blue_3">lol,</span> <br> </td><td><button id="button">Highlight</button></td></tr></table></body>