Javascript dropdown menu toggle button-CodePudding

I am trying to get my option list to hide until the dropdown menu button has been clicked and for it to hide again once it has been clicked however, it is not working. Here is my code. Please let me know what i can do to fix it

My html :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1">
        <title>Cocktail App</title>
        <link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"/>
      <link rel="stylesheet" type="text/css" href="css/recipe.css">
      <script src="recipe.js"></script>
    </head>
    <body>
        <h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
        <div >
            <button onclick="myFunction()" > Cocktails!!</button>
            <div id="myDropdown" >
                <input type="text" placeholder="Choose cocktail..." id="myInput" onkeyup="filterFunction()">
                    <a href="#">Margarita</a>
                    <a href="#>Mojito</a>
                    <a href="#">Long Island tea</a>
                    <a href="#">Whiskey Sour</a>
            </div>
      </div>
      <div id="result"></div>
    </div>

    </body>
</html>

My javascript :


function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
      }  
function filterFunction() {
        var input = document.getElementById("myInput");
        var filter = input.value.toUpperCase();
        var dropDown = document.getElementById("myDropdown");
        var link = dropDown.getElementsByTagName("a");
        for (i = 0; i < link.length; i  ) {
          textValue = link[i].textContent || link[i].innerText;
          if (textValue.toUpperCase().indexOf(filter) > -1) {
            link[i].style.display = "";
          } else {
            link[i].style.display = "none";
          }
        }
}

CodePudding user response：

First try to add the missing quotation mark after # in: <a href="#>Mojito</a> and see if it works then.

And remove the 'java' from tags since this is not java but javascript :)

CodePudding user response：

You'll need some CSS to define the class "show", for example add this inside your HTML <head>:

<style>
.hidden {
    display: none !important;
}
</style>

Notice that I changed the class name to "hidden" instead of "show" for semantics. This way, when an element has the class "hidden", it will not be displayed.

Now change your Javascript correspondingly, so it adds and removes the class "hidden":

document.getElementById("myDropdown").classList.toggle("hidden");

CodePudding user response：

I can't see your css but your .show class needs to defined. Add the following to your stylesheet:

#myDropdown {
  display: none;
}

#myDropdown.show
{
  display: block;
}

Working:

function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); 
}  
function filterFunction() {
        var input = document.getElementById("myInput");
        var filter = input.value.toUpperCase();
        var dropDown = document.getElementById("myDropdown");
        var link = dropDown.getElementsByTagName("a");
        for (i = 0; i < link.length; i  ) {
          textValue = link[i].textContent || link[i].innerText;
          if (textValue.toUpperCase().indexOf(filter) > -1) {
            link[i].style.display = "";
          } else {
            link[i].style.display = "none";
          }
        }
}

#myDropdown {
  display: none;
}

#myDropdown.show
{
  display: block;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1">
    <title>Cocktail App</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
  </head>
  <body>
    <h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
    <div >
      <button onclick="myFunction()" > Cocktails!!</button>
      <div id="myDropdown" >
        <input type="text" placeholder="Choose cocktail..." id="myInput" onkeyup="filterFunction()">
        <a href="#">Margarita</a>
        <a href="#">Mojito</a>
        <a href="#">Long Island tea</a>
        <a href="#">Whiskey Sour</a>
      </div>
    </div>
    <div id="result"></div>
  </body>
</html>