如何多次拨打一个 Function？

Question

I am starting to get into JavaScript and I'm still very new to it.

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 whose drop down menus contain different information. Each time I click one of the buttons I want it to call the JavaScript 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 a better, more simplistic way of doing this?

Thank you in advanced for the help!

Here Is My JavaScript, 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 class="dropdown"> <button onclick="DropDownMenu()" class="dropbtn">Available Flavors</button> <div id="myDropdown" class="dropdown-content"> <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 class="dropdown"> <button onclick="DropDownMenu1()" class="dropbtn">Available Flavors</button> <div id="myDropdown1" class="dropdown-content"> <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 class="dropdown"> <button onclick="DropDownMenu2()" class="dropbtn">Available Flavors</button> <div id="myDropdown2" class="dropdown-content"> <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>

Answer 1

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()

Answer 2

 // 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 class="dropdown"> <button class="dropbtn">Available Flavors</button> <div id="myDropdown" class="dropdown-content"> <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 class="dropdown"> <button class="dropbtn">Available Flavors</button> <div id="myDropdown1" class="dropdown-content"> <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 class="dropdown"> <button class="dropbtn">Available Flavors</button> <div id="myDropdown2" class="dropdown-content"> <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>

Answer 3

You have some redundancies in your code, but that's part of the question you posed. I consolidated the DropDownMenu functions into one and also consolidated the window.onclick function into one as well. In the CSS, I switched the .show selector to .hide and changed the rule to be display:none and added hide to each .dropdown-content element's class attribute.

Another big change I made was to reference the drop down buttons and the drop down content at the beginning of the script, outside of any functions (note: I used const but you can use var if you prefer). Then, for each of the buttons, I created an eventListener to the click MouseEvent (thus, replacing the onclick attribute for each of the buttons).

Inside the newly consolidated dropDownMenu function, I selected the event.currentTarget and used destructuring to get the element's id. Then, I added the hide class to each of the .dropdown-content elements except the button's corresponding .dropdown-content element. I used String.substring to get the digit in the id, subtracted 1 for zero-based index to get the appropriate element so that I can toggle the class appropriately.

This now allows us to click on any of the buttons and hide the other .dropdown-content elements, but the window.onclick needs to be adjusted to add the hide class to each dropDownElement element when clicking on anything outside of these buttons. We don't actually need to check whether the classList of each element includes the hide class before adding it since the .add() method will ignore any classes already present.

I made a few minor changes to other CSS which were causing some odd movement as well. See the working solution below:

 const dropDownElements = document.getElementsByClassName("dropdown-content"); const dropDownButtons = document.getElementsByClassName("dropbtn"); var i; for (i = 0; i < dropDownButtons.length; i++) { dropDownButtons[i].addEventListener("click", dropDownMenu); } function dropDownMenu(event) { const element = event.currentTarget; const { id } = element; // destructuring: `id = element.id` let idNumber = parseInt(id.substring(2)) - 1; for (i = 0; i < dropDownElements.length; i++) { if (idNumber.== i) { dropDownElements[i].classList;add("hide"). } } dropDownElements[parseInt(id.substring(2)) - 1].classList;toggle("hide"). } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (.event.target;classList.contains('dropbtn')) { for (i = 0; i < dropDownElements.length. i++) { dropDownElements[i];classList.add('hide'); } } }

 .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-color: transparent; border-right-color: transparent; margin-top: 7px; margin-bottom: 6px; }.dropdown { position: relative; display: inline-block; }.dropdown-content { 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); }.hide { display: none; }

 <div class="dropdown"> <button class="dropbtn" id="dd1">Available Flavors</button> <div id="myDropdown1" class="dropdown-content hide"> <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 class="dropdown"> <button class="dropbtn" id="dd2">Available Flavors</button> <div id="myDropdown2" class="dropdown-content hide"> <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 class="dropdown"> <button class="dropbtn" id="dd3">Available Flavors</button> <div id="myDropdown3" class="dropdown-content hide"> <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>