title: Drop Down Menu- How to link multiple buttons to javascript function
body: <p>I am trying to develop a drop down menu. I have written html code and javascript for two buttons, but I am wondering how to link the second button to javascript. Do I need to write another <code>function()</code>?</p>
  
  <pre><code>&lt;div class="dropmenu"&gt;
    &lt;button onclick="myFunction()" class="button1" style="background-color:#61117F ;"&gt;Dropdown&lt;/button&gt;
    &lt;div id="Dropdown1" class="dropmenu-content"&gt;
      &lt;a href=" http://www.apple.com/"&gt;Apple&lt;/a&gt;
      &lt;a href="https://www.google.com/"&gt;google&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="dropmenu"&gt;
    &lt;button onclick="myFunction()" class="button1" style="background-color:#d7791b ;"&gt;DropDown2&lt;/button&gt;
    &lt;div id="Dropdown2" class="dropmenu-content"&gt;
      &lt;a href=" https://www.yahoo.com/"&gt;Yahoo&lt;/a&gt;
      &lt;a href="https://www.facebook.com/"&gt;FB&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    function myFunction() {
        document.getElementById("Dropdown1").classList.toggle("show");
        window.onclick = function(event) {
            if (!event.target.matches('.button1')) {
              var drop = document.getElementsByClassName("dropmenu-content");
              var i;
              for (i = 0; i &lt; drop.length; i++) {
                var Dropdown = drop[i];
                if (Dropdown.classList.contains('show')) {
                  Dropdown.classList.remove('show');
                }
              }}}
  &lt;/script&gt;
  </code></pre>