conditionally generate or hide html div ID dynamically using Javascript variable value or url

I have div in my index.html page which is basically a loader for page loading. But in one particular url, I dont want the loader to appear. I am able to fetch current url and storing it in a variable inside script tag. But I am not sure how to enable and disable the loader based on that variable value. Here is the code for the div tag which has loader

<div id="loading" >
      <div class="loading-container">

          <svg class='loderlogo' width="139" height="165" viewBox="0 0 139 165" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="16" height="113.937" fill="#41AEA9"/>
            <rect x="123" width="16" height="113.937" fill="#41AEA9"/>
            <rect width="139" height="15.9911" transform="matrix(1 0 0 -1 0 15.9912)" fill="#41AEA9"/>
            <rect width="86.0291" height="15.9942" transform="matrix(0.808532 0.588453 -0.588881 0.80822 9.41895 100.944)" fill="#41AEA9"/>
            <rect width="85.7175" height="15.9942" transform="matrix(0.808557 -0.588418 0.588846 0.808245 60.249 151.381)" fill="#41AEA9"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M114 24.9861H69V132.896V132.926H69.022L69 132.896L114 100.147V24.9861ZM114 119.929L96.1401 132.926H114V119.929Z" fill="#41AEA9"/>
            </svg>

      <div class="shadow"></div>

      <p class="text-center loading-text">Loading ...</p>
</div>

here is script tag where I am fetching url

<script>
      var url_parts = location.href.split(/\//g);
      var page = url_parts[url_parts.length-1];
<script/>

So how can I disable or change the div element based on "page" value in script tag?

1 answer

  • answered 2021-06-23 07:28 Surjeet Bhadauriya

    It's quite simple. You can do this by using document.getElementById.

    if (page === 'something') {
       document.getElementById('loading').style.display = 'none'; // hide
    } else {
       document.getElementById('loading').style.display = 'block'; // show
    }