Javascript - On click of icon show drop down menu

Question

I am attempting to show a drop down menu on click of an icon. At the moment, upon clicking on the icon that is wrapped inside of an anchor tag with an onclick function nothing happens which can be seen in the first example.

I attempted to work around this by inputting text inside of the onclick anchor tag that says DOWNLOAD REPORT upon clicking on the text, the drop down menu appears as expected but if I were to icon on the right, the drop down menu doesn't to appear.

How can I get the drop down menu to display on click of the icon and not the text?

Here is my code samples:

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

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



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

a {
cursor: pointer;
}

.download-btn-container {
    display: inline-block;
    float: right;
   
}

.download-btn-container a {
    font-weight: 700;
    letter-spacing: .5px;
    color: #c94927;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-download {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    /* Links inside the dropdown */
    .dropdown-download a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-download a:hover {
            background-color: #ddd
        }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}


    


DOWNLOAD LIST 
    save_alt
            
              Link 1
              Link 2
              Link 3
            
        
        
 






 
 
     DOWNLOAD LISTsave_alt
            
              Link 1
              Link 2
              Link 3

ARLCode · Accepted Answer

I went through your code and found a couple of errors.

Error 1 in your example you have the same function named twice, so I'm assuming that's just for testing, but make sure you update your function names when testing eg. your JS has myFunction() and myFunction(), try myFunction() and myFunction2().

Error 2 your windows.onClick event needs to be rewritten more like this:

// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-download"),
            showEvent = 'show';
        for (var i = 0; i < dropdowns.length; i++) {
            var currentElement = dropdowns[i],
                currentElementAsString = dropdowns[i].toString();
            if (currentElementAsString.localeCompare(showEvent)) {
                currentElement.classList.remove('show');
            }
        }
    }
}

Explanation your original code was iterating through your classList already so you were essentially comparing characters, this line specifically:

var dropdowns = document.getElementsByClassName("dropdown-download");
var i;
for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
    }
}

notice how you're using getElementsByClassName(), this is going to return an array of class names within the element, by the time you get to your for loop, you're already in class names, so essentially you're iterating through the strings within your indices.

Error 3 Your event trigger is looking for the .dropbtn class but your anchor tag has that class, not your actual icon. Here is the line I'm referring to:

save_alt

This should be rewritten like this:

save_alt

If you prefer the other way, you'll need to add dropbtn class to your material-icons span. I hope this makes sense, let me know if you need help. :)

Codepen

Javascript - On click of icon show drop down menu

Answers (2)

Related Questions