2

Code works perfectly standalone, but not with the rest of the html. I think it's because it's having trouble finding the child element to click on.

Check: https://ironpatch.co/apps/customify/view/example/1823535693868?variant=14751668666412&domain=ironpatch.co

To test: Click on thumbnail photos on the bottom left.

document.querySelector('[data-target="1"]').addEventListener('click', function() {
  var toolbar = document.getElementById('toolbar');
  toolbar.style.visibility = "hidden";
}, false);

document.querySelector('[data-target="0"]').addEventListener('click', function() {
  var toolbar = document.getElementById('toolbar');
  toolbar.style.visibility = "visible";
}, false);
<div class="editor_thumbnail">
  <ul id="side-switcher">
    <li class="thumb product-switch"><img data-target="0" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Icon_1_%28set_basic%29.png" alt="" class="tooltip img_switcher img d_block tooltipstered"></li>
    <li class="thumb product-switch"><img data-target="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Icon_2_blue.svg/1024px-Icon_2_blue.svg.png"></li>
  </ul>
</div>


<ul id="toolbar">
  <li id="tab-ref-add_image" class="tab-link" data-tab="add_image"><a href="#" class="show"><i class="material-icons">add_a_photo</i><span class="icon-text txtLang">Add Art</span></a></li>
  <li id="tab-ref-add_text" class="tab-link" data-tab="add_text"><a href="#" class="show"><i class="material-icons">font_download</i><span class="icon-text txtLang">Add Text</span></a></li>
  <li id="tab-ref-add_layer" class="tab-link" data-tab="view_layer"><a href="#" class="show"><i class="material-icons">layers</i><span class="icon-text txtLang">Layers</span></a></li>
  <li id="tab-ref-save_data" class="tab-link" data-tab="save_data"><a href="#" class="show"><i class="material-icons">save</i><span class="icon-text txtLang">Save Product</span></a></li>
  <li id="tab-ref-load_saved" class="tab-link" data-tab="load_saved"><a href="#" class="show"><i class="material-icons">assignment_turned_in</i><span class="icon-text txtLang">Load</span></a></li>
</ul>

The white icons in the dark grey toolbar should hide and not work when the brown label thumbnail is clicked.

The white icons in the dark grey toolbar should show and work when the white shirt thumbnail is clicked.

Mobarak Ali
  • 751
  • 5
  • 19
Lake
  • 89
  • 8
  • 2
    I think the problem you're having is this javascript is being run before the page has fully loaded, so the thumbnails you're trying to select aren't there yet. – Dave Morrissey Jun 03 '19 at 20:27
  • @dave morrissey I see. How would I work around this? The script is placed at the bottom of the page. – Lake Jun 03 '19 at 20:30
  • Have a look at something like this: https://stackoverflow.com/questions/16149431/make-function-wait-until-element-exists – Dave Morrissey Jun 03 '19 at 20:30
  • 1
    Did you know ? The link you shared has a problem parsing `https://ironpatch.co/apps/customify/view/example/hidetoolbar.js`. The above javascript click events when executed indivudially on the console works fine. – Panther Jun 04 '19 at 10:27
  • @Panther do you know how i'd work around this? – Lake Jun 05 '19 at 05:57

1 Answers1

1

Why not use a child selector, like this:

// cache the toolbar
const toolbar = document.getElementById('toolbar');

// select the children elements (in this case elements with a class of ".child")
[...document.querySelectorAll("div > .child")].forEach((child) => {
  // add a click event listener to the child
  child.addEventListener("click", () => {
    // change the toolbar's visibility
    const visible = (toolbar.style.visibility === "visible");
    toolbar.style.visibility = visible ? "hidden" : "visible";
  });
});

NOTE: cache the toolbar variable outside of the forEach loop and/or event listener.

Good luck.

Malekai
  • 4,765
  • 5
  • 25
  • 60