How To Correctly Toggle Classes Using Document.getelementsbyclassname And Element.classlist

I have a page where I want to be able to toggle classes on particular elements on or off. In an attempt to do this I have written a function: function toggleClass(obj) { alert(

Solution 1:

The problem is that you keep referencing obj.className, but in the forEach loop, once the clicked element is iterated over, the obj.className becomes blank, so on further iterations (such as the "a" in is a story), the string passed to element.classList.toggle is blank.

Another problem is that when you try to click the element again, it has no existing class, so obj.className is empty - there's no class to toggle back on.

Instead of adding handlers in HTML attributes (which is as bad as eval), try iterating through all elements that need a handler beforehand, so you can build an array of elements for each className you want to be able to toggle.

A less elegant solution (that would require many fewer changes) would be to toggle a different class which overrides the color and border properties of the determiner and other classes:

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

.determiner {
  /* color: rgb(248, 8, 8); */border: 1px solid rgb(248, 8, 8);
}

.preposition {
  color: rgb(40, 18, 236);
  /* border: 1px solid rgb(40, 18, 236); */
}

.verb-present {
  color: rgb(13, 146, 68);
  /* border: 3px solid rgb(13, 146, 68); */
}

span[class^='noun-'],
span[class*=' noun-'] {
  color: #F00;
}

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

<tableclass="grammar table table-hover"data-toggle="table"data-sort-name="instance_use"data-sort-order="desc"><thead><tr><thstyle=""data-field="grammar_type"tabindex="0"><divclass="th-inner sortable both">Grammar Type</div><divclass="fht-cell"></div></th><thstyle=""data-field="instance_use"tabindex="0"><divclass="th-inner sortable both desc">Instances of Use</div><divclass="fht-cell"></div></th></tr></thead><tbody><trdata-index="0"><tdstyle=""><spanclass="adverb"onclick="toggleClass(this)">Adverb</span></td><tdstyle="">2 </td></tr><trdata-index="1"><tdstyle=""><spanclass="verb-present"onclick="toggleClass(this)">Verb, present</span></td><tdstyle="">2 </td></tr><trdata-index="2"><tdstyle=""><spanclass="determiner"onclick="toggleClass(this)">Determiner</span></td><tdstyle="">2 </td></tr><trdata-index="3"><tdstyle=""><spanclass="noun-sing-or-mass"onclick="toggleClass(this)">Noun, sing. or mass</span></td><tdstyle="">1 </td></tr><trdata-index="4"><tdstyle=""><spanclass=""onclick="toggleClass(this)">Preposition</span></td><tdstyle="">1 </td></tr><trdata-index="5"><tdstyle=""><spanclass="noun-plural"onclick="toggleClass(this)">Noun, plural</span></td><tdstyle="">1 </td></tr><trdata-index="6"><tdstyle=""><spanclass="comma"onclick="toggleClass(this)">Comma</span></td><tdstyle="">1 </td></tr><trdata-index="7"><tdstyle=""><spanclass="personal-pronoun"onclick="toggleClass(this)">Personal pronoun</span></td><tdstyle="">1 </td></tr></tbody></table><divid="story_text"><spanstyle="white-space: pre-line"><spanclass="adverb">here</span><spanclass="verb-present">is</span><spanclass="determiner">a</span><spanclass="noun-sing-or-mass">story</span><spanclass="">with</span><spanclass="determiner">no</span><spanclass="noun-plural">commas</span><spanclass="comma">,</span><spanclass="adverb">now</span><spanclass="personal-pronoun">it</span><spanclass="verb-present">does</span></span></div>