How Do You Call One Function Multiple Times?-CodePudding

I am starting to get into JS and have no clue what I am doing.

I have a function that I want to call multiple times in different parts of my website. In this case it is a drop down menu.

I have multiple buttons all who's drop down menus contain different information. Each time I click one of the buttons I want it to call the JS code to implement the drop down menu and then show the individual buttons information unless multiple drop down menus have been clicked in which multiple drop down menus will be showing.

I was able to do so already, however my code seems inefficient. What's the better more simplistic way of doing this?

Thank you in advanced for the help!

Here Is My Java, CSS, & HTML Code

function DropDownMenu() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}






function DropDownMenu1() {
  document.getElementById("myDropdown1").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}





function DropDownMenu2() {
  document.getElementById("myDropdown2").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  background-color: transparent;
  color: rgb(81, 144, 160);
  padding: 8px;
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 5px;
  border-left: 1px solid rgb(135, 134, 134);
  border-right: 1px solid rgb(135, 134, 134);
  cursor: pointer;
  border-radius: 9%;
  font-weight: 600;
}

.dropbtn:hover, .dropbtn:focus {
  border-bottom: 1px solid rgb(135, 134, 134);
  border-top: 1px solid rgb(135, 134, 134);
  border-left: none;
  border-right: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--first-color);
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  font-family: Georgia, 'Times New Roman', Times, serif;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-top: .1px solid rgb(135, 134, 134);
}

.dropdown a:hover {background-color: var(--first-color-alt);}

.show {display: block;}

<div >
                    <button onclick="DropDownMenu()" >Available Flavors</button>
                    <div id="myDropdown" >
                      <a href="#">Sunset Cocktail</a>
                      <a href="#">Shake Shake</a>
                      <a href="#">Strawberry Mango</a>
                      <a href="#">Cranberry Grape</a>
                      <a href="#">Kiwi Strawberry</a>
                      <a href="#">Guava Shake</a>
                      <a href="#">Apple Shake</a>
                      <a href="#">Cool Mint</a>
                      <a href="#">Blueberry Kiwi Ice</a>
                      <a href="#">Aloe Blackcurrant</a>
                      <a href="#">Coconut Grove</a>
                      <a href="#">Pink Lemonade</a>
                    </div>
                  </div>
            
            
            
                  
                  
 <div >
                    <button onclick="DropDownMenu1()" >Available Flavors</button>
                    <div id="myDropdown1" >
                      <a href="#">Sunset Cocktail</a>
                      <a href="#">Shake Shake</a>
                      <a href="#">Strawberry Mango</a>
                      <a href="#">Cranberry Grape</a>
                      <a href="#">Kiwi Strawberry</a>
                      <a href="#">Guava Shake</a>
                      <a href="#">Apple Shake</a>
                      <a href="#">Cool Mint</a>
                      <a href="#">Blueberry Kiwi Ice</a>
                      <a href="#">Aloe Blackcurrant</a>
                      <a href="#">Coconut Grove</a>
                      <a href="#">Pink Lemonade</a>
                    </div>
                  </div>
                  
                  
                  
                 
                  
                  
 <div >
                    <button onclick="DropDownMenu2()" >Available Flavors</button>
                    <div id="myDropdown2" >
                      <a href="#">Sunset Cocktail</a>
                      <a href="#">Shake Shake</a>
                      <a href="#">Strawberry Mango</a>
                      <a href="#">Cranberry Grape</a>
                      <a href="#">Kiwi Strawberry</a>
                      <a href="#">Guava Shake</a>
                      <a href="#">Apple Shake</a>
                      <a href="#">Cool Mint</a>
                      <a href="#">Blueberry Kiwi Ice</a>
                      <a href="#">Aloe Blackcurrant</a>
                      <a href="#">Coconut Grove</a>
                      <a href="#">Pink Lemonade</a>
                    </div>
                  </div>

CodePudding user response：

You could reduce your JS code to something like this:

const dropdowns = Array.from(document.getElementsByClassName("dropdown-content"));
const elements = [
 document.getElementById("myDropdown"),
 document.getElementById("myDropdown1"),
 document.getElementById("myDropdown2")
]

function DropDownMenu(){ elements[0].classList.toggle("show")} 
function DropDownMenu1(){ elements[1].classList.toggle("show")} 
function DropDownMenu2(){ elements[2].classList.toggle("show")} 

// Close the dropdown if the user clicks outside of it
window.onclick = (event) => {                 //  <--- JS ES6 arrow function
  if (!event.target.matches('.dropbtn')) {
    dropdowns.forEach((element) => {
        element.classList.remove('show')
      })
  }
}

There are many things in your code that are not needed, that's why I could reduce it. I coded this fast, so I don't promise it will be perfect. But it can give an idea of another approach. Simpler.

I converted dropdowns to array because you need an array to use forEach()

CodePudding user response：

  // You can turn node list to array by spreading it into array
 [... document.getElementsByClassName("dropbtn")].forEach(element => element.addEventListener("click" , function(){
this.nextElementSibling.classList.toggle("show");

}))


// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
     [...document.getElementsByClassName("dropdown-content")].forEach(element =>  {
      if (element.classList.contains('show')) {
        element.classList.remove('show') } })
     
    } }

.dropbtn {
  background-color: transparent;
  color: rgb(81, 144, 160);
  padding: 8px;
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 5px;
  border-left: 1px solid rgb(135, 134, 134);
  border-right: 1px solid rgb(135, 134, 134);
  cursor: pointer;
  border-radius: 9%;
  font-weight: 600;
}

.dropbtn:hover, .dropbtn:focus {
  border-bottom: 1px solid rgb(135, 134, 134);
  border-top: 1px solid rgb(135, 134, 134);
  border-left: none;
  border-right: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--first-color);
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  font-family: Georgia, 'Times New Roman', Times, serif;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-top: .1px solid rgb(135, 134, 134);
}

.dropdown a:hover {background-color: var(--first-color-alt);}

.show {display: block;}

<div >
                    <button >Available Flavors</button>
                    <div id="myDropdown" >
                      <a href="#">Sunset Cocktail</a>
                      <a href="#">Shake Shake</a>
                      <a href="#">Strawberry Mango</a>
                      <a href="#">Cranberry Grape</a>
                      <a href="#">Kiwi Strawberry</a>
                      <a href="#">Guava Shake</a>
                      <a href="#">Apple Shake</a>
                      <a href="#">Cool Mint</a>
                      <a href="#">Blueberry Kiwi Ice</a>
                      <a href="#">Aloe Blackcurrant</a>
                      <a href="#">Coconut Grove</a>
                      <a href="#">Pink Lemonade</a>
                    </div>
                  </div>
            
            
            
                  
                  
 <div >
                    <button  >Available Flavors</button>
                    <div id="myDropdown1" >
                      <a href="#">Sunset Cocktail</a>
                      <a href="#">Shake Shake</a>
                      <a href="#">Strawberry Mango</a>
                      <a href="#">Cranberry Grape</a>
                      <a href="#">Kiwi Strawberry</a>
                      <a href="#">Guava Shake</a>
                      <a href="#">Apple Shake</a>
                      <a href="#">Cool Mint</a>
                      <a href="#">Blueberry Kiwi Ice</a>
                      <a href="#">Aloe Blackcurrant</a>
                      <a href="#">Coconut Grove</a>
                      <a href="#">Pink Lemonade</a>
                    </div>
                  </div>
                  
                  
                  
                 
                  
                  
 <div >
                    <button >Available Flavors</button>
                    <div id="myDropdown2" >
                      <a href="#">Sunset Cocktail</a>
                      <a href="#">Shake Shake</a>
                      <a href="#">Strawberry Mango</a>
                      <a href="#">Cranberry Grape</a>
                      <a href="#">Kiwi Strawberry</a>
                      <a href="#">Guava Shake</a>
                      <a href="#">Apple Shake</a>
                      <a href="#">Cool Mint</a>
                      <a href="#">Blueberry Kiwi Ice</a>
                      <a href="#">Aloe Blackcurrant</a>
                      <a href="#">Coconut Grove</a>
                      <a href="#">Pink Lemonade</a>
                    </div>
                  </div>