Javascript: Event delegation script to hide html on load not working?

Question

Problem

I am trying to hide a certain section using event delegation. I have tried other solutions previously (Javascript: Issue with hiding a section) and was told that the content maybe dynamically generated which is why I needed to use event delegation.

HTML code

<div class="wcf-order-wrap"> 
Blah
<div class="wcf-bump-order-content">
Blah2
</div>
</div>

Code that I tried

document.getElementsByClassName('wcf-order-wrap')[0].addEventListener('load', event => { // Step 2
  if (event.Target.className === 'wcf-bump-order-content') { // Step 3
    document.getElementsByClassName("wcf-bump-order-content")[0].setAttribute('style', 'display:none !important');
    console.log("xxx");
  }
});

This code was based on what I read here: https://dmitripavlutin.com/javascript-event-delegation/

Results

Code does not appear to work. I do not see any errors in Console. However, neither do I see xxx appearing. What's more, the section I want to hide is still present.

Link to JS Fiddle: https://jsfiddle.net/lindychen/xj21amte/1/

Load events do not propagate. Propagation is required for delegate listeners to work. https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event — Taplar, Aug 12 '20 at 17:06
You can put a load event on the window element, which will happen once all of the resources on the page are loaded. — Taplar, Aug 12 '20 at 17:09
Thanks @Taplar. But then for this section of my script `addEventListener('load', event`, what then do I change the `load` to? I want the script to run once the page is loaded finish so I am not sure what to put there. — xojijog684, Aug 12 '20 at 17:12
It's still the load event. `window.addEventListener('load', ...)`. An example of exactly that is already present in that MDN documentation. — Taplar, Aug 12 '20 at 17:13
Also, it's `event.target`, not `event.Target`. JavaScript is case-sensitive. — Scott Marcus, Aug 12 '20 at 17:17
Also `if (event.target.classList.contains('wcf-bump-order-content')) ...` — mplungjan, Aug 12 '20 at 17:18

Scott Marcus · Answer 1 · 2020-08-12T17:24:20.757

You are trying to hook into the load event of a div, but a div element won't ever fire that event. load is triggered when a resource is finished downloading and is loaded into the document. This might be an image or a script who's src has finished downloading. Or, it can be placed on the window and will trigger when all the descendant elements that load resources are finished doing so.

But, in your case all of that is overkill. If you just want to hide an element from the start, you can accomplish this with just CSS:

div.wcf-bump-order-content { display:none; }

<div class="wcf-order-wrap"> 
  outer div
  <div class="wcf-bump-order-content">
    inner div
  </div>
</div>

Or, if you wanted to do it with JavaScript, you can just place your script just prior to the closing body tag so that it runs after all the HTML has been parsed.

.hidden { display:none; }

<body>
  <div class="wcf-order-wrap"> 
    outer div
    <div class="wcf-bump-order-content">
      inner div
    </div>
  </div>
  <script>
    document.querySelector("div.wcf-bump-order-content").classList.add("hidden");
  </script>
</body>

Hi Scott, thanks. I tried your code but it still doesn't work. Would you mind helping me having a look over here (https://rebrand.ly/Scott-Marcus)? The portion that I am trying to hide still appears (https://i.ibb.co/zPwWh7K/image.png). Thank you. — xojijog684, Aug 13 '20 at 03:27

ZBorkala · Answer 2 · 2020-08-13T04:37:49.423

0

I think that load event doesn't support to div element.

Refer here

Supported HTML tags:

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

I think the following code is sufficient to achieve what you looking for.

window.onload = function(e) {
    setTimeout(function() {
    document.getElementsByClassName("wcf-bump-order-content")[0].style.display = 'none';
},1200);
}

edited Aug 13 '20 at 04:37

answered Aug 12 '20 at 17:23

ZBorkala

366
3
13

Hi ZBorkala, thanks. I tried your code but it still doesn't work. Would you mind helping me having a look over here (https://rebrand.ly/ZBorkala)? The portion that I am trying to hide still appears (https://i.ibb.co/zPwWh7K/image.png). Thank you. – xojijog684 Aug 13 '20 at 03:28
I have made some changes. It may help. Or keep trying increasing the delay milliseconds(1200) in setTimeout();. Some other js function to remove the style attribute is called after the page loading. – ZBorkala Aug 13 '20 at 04:41
Hi ZBorkala, thanks it does seem to work. However, do you know of a solution that doesn't involve relying on a timer? The box will still appear and then be abruptly hidden which doesn't look that good from a user experience standpoint. Thank you. – xojijog684 Aug 13 '20 at 07:21

mplungjan · Answer 3 · 2020-08-13T17:32:31.533

Many issues

only load events on few elements such as window, images and iframes
use newer methods - your methods are very old and inefficient today
there is no useful target on window load - you can use click:

window.addEventListener("load", () => { // on page load
  const wcf_chk = document.getElementById("wcf-bump-order-cb");
  const wcf_container = document.querySelector('.wcf-content-container')
  wcf_container.classList.toggle("hide",!wcf_chk.checked)
  wcf_chk.addEventListener("click",function() {
    wcf_container.classList.toggle("hide",!this.checked)
  })
});

.hide {
  display: none !important
}

<div class="wcf-bump-order-wrap wcf-bump-order-style-1 wcf-after-payment">

  <input type="hidden" name="wcf_bump_product_id" class="wcf-bump-product-id" value="2881"><input type="hidden" name="_wcf_bump_product" value="">
  <!-- wcf-bump-order-content -->
  <div class="wcf-bump-order-content">
    <!-- wcf-bump-order-field-wrap -->
    <div class="wcf-bump-order-field-wrap">
      <label>
                <svg version="1.1" class="wcf-pointing-arrow wcf-blink" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="15px" fill="red" viewBox="310 253 90 70" enable-background="new 310 253 90 70" xml:space="preserve"><g><g><path d="M364.348,253.174c-0.623,0.26-1.029,0.867-1.029,1.54v18.257h-51.653c-0.919,0-1.666,0.747-1.666,1.666v26.658
                                c0,0.92,0.747,1.666,1.666,1.666h51.653v18.327c0,0.673,0.406,1.28,1.026,1.54c0.623,0.257,1.34,0.116,1.816-0.36l33.349-33.238 c0.313-0.313,0.49-0.737,0.49-1.18c0-0.443-0.177-0.866-0.487-1.179l-33.349-33.335 C365.688,253.058,364.971,252.915,364.348,253.174z"></path></g></g></svg>               <input type="checkbox" id="wcf-bump-order-cb" class="wcf-bump-order-cb" name="wcf-bump-order-cb" value="2881">
                <span class="wcf-bump-order-label">Yes, I will take it!             </span>
            </label>
    </div>
    <!-- wcf-bump-order-field-wrap -->


    <!-- wcf-content-wrap -->
    <div class="wcf-content-container" class="hide">

      <!-- Right side box  -->
      <div class="wcf-bump-order-offer-content-right">

        <!-- Offer box  -->
        <div class="wcf-bump-order-offer">
          <span class="wcf-bump-order-bump-highlight">ONE TIME OFFER                        </span>
        </div>
        <!-- Offer box  -->

        <!-- wcf-bump-order-desc -->
        <div class="wcf-bump-order-desc">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, quod hic expedita consectetur vitae nulla sint adipisci cupiditate at. Commodi, dolore hic eaque tempora a repudiandae obcaecati deleniti mollitia possimus. </div>
        <!-- wcf-bump-order-desc -->
      </div>
      <!-- Right side box  -->

    </div>
    <!-- wcf-content-wrap -->
  </div>
  <!-- wcf-bump-order-content -->

</div>

Hi mplungjan, thanks. I tried your code but it still doesn't work. Would you mind helping me having a look over here (https://rebrand.ly/mplungjan)? The portion that I am trying to hide still appears (https://i.ibb.co/zPwWh7K/image.png). Thank you. — xojijog684, Aug 13 '20 at 03:29
Hi mplungjan, sorry to bother you again. If you have some time, could you possibly help me out, please? Thank you. — xojijog684, Aug 13 '20 at 15:37
I really do not understand what you want. What does the user see and what does the user do? Do you want to hide the offer until the user check the checkbox? See update — mplungjan, Aug 13 '20 at 17:32
Thanks for the reply! Apologies if I wasn’t clear. I only want to hide the order bump section for users purchasing a product called `GetAllX`. I intended to use your code together with what I had (https://jsfiddle.net/lindychen/8Lurx91n/2/). Your code would go where it says “//Place mplungjan's script here”. My previous code was not effective in hiding the order bump section. Currently, I have updated your code on my website (without using it as part of my code) and it doesn’t seem to hide that the order bump section still. Would you happen to know why this is so? Thank you for your help. — xojijog684, Aug 14 '20 at 13:22
Hi @mplungjan, thanks. It is the correct fiddle. I was attempting to explain what I was trying to achieve since I wasn't clear about it in my earlier example. Basically, the code finds a product called `GetAllX`. If so, then hide the order bump section. I intended to place the eventual script you provided within the place where it says `//Place mplungjan's script here`. Thank you. — xojijog684, Aug 14 '20 at 13:43

Javascript: Event delegation script to hide html on load not working?

3 Answers3