Toggle classes on click with JavaScript

Question

I have a page which contains some user entered text in one section and in another section a table of how many verbs, nouns etc are used in that text. The table of verbs etc and the instances of those verbs in the text are styled in the same way via their class eg <td style=""><span class="adverb">Adverb</span></td> in the table and <span class="adverb">here</span> in the text.

I would like for a user to be able to click on the item in the table and for the appropriate class in the text and table to be toggled on and off.

For example, on the page sidebar the user sees a table which has in one column the words verb , adverb , adjective etc and these words are styled with a particular colour ( verb is green, adverb is red, adjective is blue). In the main section of the page the user sees the text they have entered and each example of a grammatical type carries the same style (eg all words that are verbs are green, all adverbs are red).

When the user clicks on the word 'adverb' in the sidebar table I would like to toggle the class="adverb" to be present or not in both the table and the user entered text and therefore affect the styling that is applied.

Represetative markup for the table and text are below. Any help much appreciated!

  <table class="grammar table table-hover" data-toggle="table" data-sort-name="instance_use" data-sort-order="desc"> <thead> <tr> <th style="" data-field="grammar_type" tabindex="0"> <div class="th-inner sortable both">Grammar Type</div> <div class="fht-cell"></div> </th> <th style="" data-field="instance_use" tabindex="0"> <div class="th-inner sortable both desc">Instances of Use</div> <div class="fht-cell"></div> </th> </tr> </thead> <tbody> <tr data-index="0"> <td style=""><span class="adverb">Adverb</span></td> <td style="">2 </td> </tr> <tr data-index="1"> <td style=""><span class="verb-present">Verb, present</span></td> <td style="">2 </td> </tr> <tr data-index="2"> <td style=""><span class="determiner">Determiner</span></td> <td style="">2 </td> </tr> </tbody> </table> 

Below is the markup where the user-entered content is rendered

  <div id="story_text"> <span style="white-space: pre-line"> <span class="adverb">here</span> <span class="verb-present">is</span> <span class="determiner">a</span> <span class="adverb">another</span> <span class="verb-present">one</span> <span class="determiner">here </span><span class="adverb">multiple</span> <span class="verb-present">instances</span> <span class="determiner">word</span> </div> 

Answer 1

See, if this is what you are looking for

 $(document).ready(function() { $('.adverb').addClass('adverbFixed'); $('.verb-present').addClass('verb-presentFixed'); $('.determiner').addClass('determinerFixed'); $('.adverbFixed').click(function() { $('.adverbFixed').toggleClass('adverb'); }); $('.verb-presentFixed').click(function() { $('.verb-presentFixed').toggleClass('verb-present'); }); $('.determinerFixed').click(function() { $('.determinerFixed').toggleClass('determiner'); }); }); 

 .adverb { color: green; } .verb-present { color: red } .determiner { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="grammar table table-hover" data-toggle="table" data-sort-name="instance_use" data-sort-order="desc"> <thead> <tr> <th style="" data-field="grammar_type" tabindex="0"> <div class="th-inner sortable both">Grammar Type</div> <div class="fht-cell"></div> </th> <th style="" data-field="instance_use" tabindex="0"> <div class="th-inner sortable both desc">Instances of Use</div> <div class="fht-cell"></div> </th> </tr> </thead> <tbody> <tr data-index="0"> <td style=""><span class="adverb">Adverb</span></td> <td style="">2 </td> </tr> <tr data-index="1"> <td style=""><span class="verb-present">Verb, present</span></td> <td style="">2 </td> </tr> <tr data-index="2"> <td style=""><span class="determiner">Determiner</span></td> <td style="">2 </td> </tr> </tbody> </table> <div id="story_text"> <span style="white-space: pre-line"> <span class="adverb">here</span> <span class="verb-present">is</span> <span class="determiner">a</span> <span class="adverb">another</span> <span class="verb-present">one</span> <span class="determiner">here </span><span class="adverb">multiple</span> <span class="verb-present">instances</span> <span class="determiner">word</span> </div> 

Answer 2

Not 100% sure if this is what you wanted, you cant customize the colors, of course.

 $(document).ready(function() { $("table .adverb").click(function() { toggleClass('adverb'); }); $("table .verb-present").click(function() { toggleClass('verb-present'); }); $("table .determiner").click(function() { toggleClass('determiner'); }); }); function toggleClass(className){ if ($("#story_text").hasClass(className)) { $("#story_text").removeClass(className); } else { $("#story_text").removeClass(); $("#story_text").addClass(className); } } 

 .adverb .adverb, table .adverb { color: red; } .verb-present .verb-present, table .verb-present { color: green; } .determiner .determiner, table .determiner { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="grammar table table-hover" data-toggle="table" data-sort-name="instance_use" data-sort-order="desc"> <thead> <tr> <th style="" data-field="grammar_type" tabindex="0"> <div class="th-inner sortable both">Grammar Type</div> <div class="fht-cell"></div> </th> <th style="" data-field="instance_use" tabindex="0"> <div class="th-inner sortable both desc">Instances of Use</div> <div class="fht-cell"></div> </th> </tr> </thead> <tbody> <tr data-index="0"> <td style=""><span class="adverb">Adverb</span></td> <td style="">2 </td> </tr> <tr data-index="1"> <td style=""><span class="verb-present">Verb, present</span></td> <td style="">2 </td> </tr> <tr data-index="2"> <td style=""><span class="determiner">Determiner</span></td> <td style="">2 </td> </tr> </tbody> </table> <div id="story_text"> <span style="white-space: pre-line"> <span class="adverb">here</span> <span class="verb-present">is</span> <span class="determiner">a</span> <span class="adverb">another</span> <span class="verb-present">one</span> <span class="determiner">here </span><span class="adverb">multiple</span> <span class="verb-present">instances</span> <span class="determiner">word</span> </div> 

Answer 3

In the end I have created a solution that uses the Element.classList.toggle option documented at https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

function toggleClass(obj) {
  const className = obj.classList[0];
  document.querySelectorAll('.' + className).forEach(element => {
    element.classList.toggle('blank');
  });
}

which is called on each item in the table <td style=""><span class="adverb" onclick="toggleClass(this)">Adverb</span></td>

This implements some CSS to override the existing styes

.blank {
  border: 0;
  color: black !important;
}

I was helped in this by @CertainPerformance in this question How to correctly toggle classes using document.getElementsByClassName and Element.classList