JQuery testing for dynamically created inline style

Question

I have an element which calls a function to create inline style attribute. This:

 <li id="Guilhem_Vidal_MSP-AU" class="highlight-entities" 
          onclick="highlightEntities(this)">Guilhem Vidal</li>

...calls this:

function highlightEntities(element) {
    $(element).css("backgroundColor", "yellow");
    $("."+ element.id).css("backgroundColor", "yellow");
    }

It sets the background colour for itself (and a number of other elements) and works perfectly.

<li id="Guilhem_Vidal_MSP-AU" class="highlight-entities" 
          onclick="highlightEntities(this)" style="background-color: yellow;">Guilhem Vidal</li>

Now, when the user clicks it again, I want to test if it has a style already set. This should be simple: if an inline style has been set, delete the style, if there is no style , then create one.

But my attempt at a test does not seem to do anything:

 function highlightEntities(element) {
    var attr = ($(element).attr("style")
    if(typeof attr !== undefined && attr !== false) {
      $(element).removeAttr("style");
      $("."+ element.id).removeAttr("style");}
    else {
      $(element).css("backgroundColor", "yellow");
      $("."+ element.id).css("backgroundColor", "yellow");}
    }

Looking at the variety of problems testing for an attribute brings , I may not be testing correctly?

May thanks in advance.

Answer 1

typeof returns a String , so your test should be:

if (typeof attr !== "undefined" && attr !== false)

Otherwise, the first clause always evaluates to true!

Here's a snippet showing that this fix make the original function work:

 function highlightEntities(element) { var attr = $(element).attr("style"); if(typeof attr !== "undefined" && attr !== false) { $(element).removeAttr("style"); $("."+ element.id).removeAttr("style");} else { $(element).css("backgroundColor", "yellow"); $("."+ element.id).css("backgroundColor", "yellow"); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li id="Guilhem_Vidal_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhem Vidal</li> </ul> <div class="Guilhem_Vidal_MSP-AU">Other element with class matching trigger id</div> 

However, as stated by @Taplar, the recommended way to do this is using jQuery's toggleClass() or ES6 classList.toggle .

Note that jQuery toggleClass is more widely compatible with older browsers. You can check classList support here .

Here's a solution with and without jQuery :

 // Vanilla Javascript function highlightEntities(element) { element.classList.toggle("highlighted"); document.querySelectorAll("." + element.id).forEach( e => e.classList.toggle("highlighted") ); } // jQuery function jqHighlightEntities(element) { $(element).toggleClass("highlighted"); $("." + element.id).toggleClass("highlighted"); } 

 .highlighted { background-color: yellow; } 

 <ul> <li id="Guilhem_Vidal_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhem Vidal</li> </ul> <div class="Guilhem_Vidal_MSP-AU">Other element with class matching trigger id</div>