Saving Red
Saving Red

Reputation: 19

How to invoke a JS function only when a condition is met

I have a dropdown list called "location" that needs to be closed when I clicked either to the navbar or header container. So far, I could not create the right condition to this case. I added my codepen for reference ..https://codepen.io/Joselle24/pen/dyNbzKY.... Need some help..Thank you so much

<nav id="mainnavbar" onload="myNaveffect()">
      <!--3 divs-->
  <div class="imageicon">
    <a href="index.html"><img src="images/brandlogo2.png" alt="brandlogo" width="50px" height="50px"></a>
    <a href="index.html" class="brandtitle" alt="brandtitle">Website Name</a>
  </div>

  <div class="navbarlink_uno">
    <ul>
      <li onclick="myLocfunction()" class="dropbtn">
        <a target="_blank" style="padding-right: 2%;"> Locations</a>
        <i class="arrow down"></i>
      </li>
      <div class="locdropdown_container">
        <a href="#" class="">Restaurant</a>
        <a href="navbarlinks/location/pbkbar/index_pbkbar.html">PBK Mini Bar</a>
      </div>

      <li class="menu"><a href="navbarlinks/menu/index_menu_seasonal.html" target="_self" class="links">Menu</a></li>
      <li class="story"><a href="navbarlinks/story/index_story.html" target="_self" class="links">Story</a></li>
      <li class="gallery"><a href="navbarlinks/gallery/index_gallery.html" target="_self" class="links">Gallery</a></li>
      <li class="rewards"><a href="navbarlinks/rewards/index_rewards.html" target="_self" class="links">Rewards</a></li>
      <li class="donate"><a href="navbarlinks/donate/index_donate.html" target="_self" class="links">Donate</a></li>
      <li class="orderbtn"><a href="navbarlinks/order/index_order.html" target="_self">Order Pickup & Delivery</a></li>
    </ul>
  </div>

  <div class="burgernavbar">
    <i class="fa fa-bars"></i>
  </div>
</nav>

  
<header>
    
</header>

Here is my JS

/* LOCATION FINDER TAB DROPDOWN BUTTON */
/* LOCATION FINDER TAB DROPDOWN BUTTON */

   //function to add ".show" selector to display "locdropdown_container" mini-container*/  
function myLocfunction() { 
    let xr = document.getElementsByClassName("locdropdown_container");
    xr[0].classList.toggle("show");  //we use the toggle()method, because it make the "class" selector on/off
};  

   //function to remove ".show" selector */
function closelocbtn(){
  const locbodyclose = document.getElementsByClassName("locdropdown_container");
        locbodyclose[0].classList.remove("show");  //we use the remove()method, because it makes the toggle()method functionable after invoking the remove()method
};  
    
  //loop all parent container after nav container*/    
let locx1, locx2;

// locx1 = document.querySelectorAll("nav, header"); //did not work
locx1 = document.querySelectorAll("nav ~ header"); //selects all element after nav container


  for (locx2 = 0; locx2 < locx1.length; locx2++) {   //loop all element
       locx1[locx2].addEventListener("click", closelocbtn);  //add an event listener and a function
};


//problem: need to invoke the function closelocbtn(), also to nav container with id#mainnavbar when the "classList.toogle" is active/on  


 /*Tested and did not work:*/
var demoss =document.querySelectorAll("#mainnavbar");  //added for selection

//var dddd = document.querySelectorAll(".show");  //store the class selector .show. 

//or

var dddd =  xr[0].classList.toggle("show");
 if (dddd == true){ //what i when here is when the .show class is selected the var demoss will execute the closelocbtn().
      demoss[0].addEventListener("click", closelocbtn);  //added
    };
    

Upvotes: 2

Views: 380

Answers (2)

Saving Red
Saving Red

Reputation: 19

Hi found the answer to this task,,thank you ..

function myLocfunction(event){  document.querySelector(".locdropdown_container").classList.toggle("show");
      myLocfunction.called = true;
        event.stopPropagation();
};

function closelocbtn(){
  if(myLocfunction.called){
      document.querySelector(".locdropdown_container").classList.remove("show");
  }
}

Upvotes: 0

a.mola
a.mola

Reputation: 4011

need to invoke the function closelocbtn(), also to nav container with id#mainnavbar when the "classList.toogle" is active/on

I changed the selector string you were using to select either the #mainnavbar or the header beside nav

let locx1 = [...document.querySelectorAll("#mainnavbar, nav ~ header")];
const myLocfunction = () => document.querySelector(".locdropdown_container").classList.toggle("show");
const closelocbtn = () => document.querySelector(".locdropdown_container").classList.remove("show");

locx1.forEach(elm => elm.addEventListener('click', closelocbtn));

Upvotes: 2

Related Questions