Why wont JQuery hide/show elements on my web page and how do I fix it?

Question

I'm having a problem that has just now started happening for no reason. I'm playing around with a block that detects whether you are using Adblock. It sets a variable, var canRunAds = true; in a file titled ads.js which is not really ads but all adblockers will block it regardless. Next, somewhere in index.html tests to see if canRunAds is defined or not like this:

<DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="../javascript/ads.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <script type="text/javascript">
    if( window.canRunAds === undefined ){
      $("#adblock_off").hide();
      $(".adblock_off").hide();
      console.debug("adblock enabled");
    }
    else {
      $("#adblock_on").hide();
      $(".adblock_on").hide();
      console.debug("adblock disabled/nonexistant");
    }
  </script>
  <div>
    <img src="../images/adblock_off.png" id="adblock_off"></img>
    <img src="../images/adblock_on.png" id="adblock_on"></img>
    <p class="adblock_off">Thanks for disabling your adblock!</p>
    <p class="adblock_on">Disable your adblock, no ads here!<p>
  </div>
</body>

This has always worked for me, however it has stopped working. The script runs the console.debug and it shows up in the console, but the elements wont hide. Any explaination?

PS: This is all documented at this GitHub repo

You're executing your JS logic before the DOM has been loaded. Either move it to the end of the `body`, or place it in a document.ready event handler — Rory McCrossan, Apr 02 '19 at 13:42
I can't see how this code worked before and then just stopped. — j08691, Apr 02 '19 at 13:43

Why wont JQuery hide/show elements on my web page and how do I fix it?

0 Answers0