I am currently working on creating a dropdown menu. I have already written the HTML and Javascript for two buttons, but I'm not sure how to connect the second button to the Javascript function. Do I need to write another function()?
<div class="dropmenu">
<button onclick="myFunction()" class="button1" style="background-color:#61117F ;">Dropdown</button>
<div id="Dropdown1" class="dropmenu-content">
<a href=" http://www.apple.com/">Apple</a>
<a href="https://www.google.com/">google</a>
</div>
</div>
<div class="dropmenu">
<button onclick="myFunction()" class="button1" style="background-color:#d7791b ;">DropDown2</button>
<div id="Dropdown2" class="dropmenu-content">
<a href=" https://www.yahoo.com/">Yahoo</a>
<a href="https://www.facebook.com/">FB</a>
</div>
</div>
<script>
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 < drop.length; i++) {
var Dropdown = drop[i];
if (Dropdown.classList.contains('show')) {
Dropdown.classList.remove('show');
}
}}}
</script>