How to do dropdown on imageclick?

Question

This is my code:

     <img src="img/fastcall150.png" id="round" onclick="myFunction();" />
        <img src="img/gesturecall150.png" id="round" onclick="myFunctio();" class="dropbtn" />
         <div id="myDropdown" class="dropdown-content">
         <a href="javascript:myFunc()"> Shake Gesture</a>           
         </div>

    <script>
                /* When the user clicks on the button,
                 toggle between hiding and showing the dropdown content */
            function myFunctio() {
                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');
                        }
                    }
                }
            }
</script>

This is CSS:

.dropbtn {
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}
.dropdown {

    position: relative;*/
    display: inline-block;*/
}

.dropdown-content {
    display: none;
/*    position: absolute;*/
text-align:center;
    background-color: #fff400;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #dadada}

.show {display:block;}

This is What i tried ,if i give this code on button click Everything works perfectly.But when i was Tried this same on img click Drop down not appear properly .

Answer 1

I fixed it, and remember, never set the same id for two or more elements, because an id is unique. If you want to add same style for many elements, than you set same classes to those elements. Good luck!

       
       $(document).ready(function(){
             $('img').click(function(e){
             e.stopPropagation();
              $('#myDropdown').toggleClass('show');
       });
         
          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');
                    }
                }
            }
        }
         
       });
 

img.round
{
    border-radius:50%;
    width:100px;
    height:100px;
    background-color:#ffcccc;
    display:block;
    outline:0;
    margin:25% auto;
    cursor: pointer;
    pointer-events: default;

}
.dropbtn {
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}
.dropdown {

    position: relative;*/
    display: inline-block;*/
}

.dropdown-content {
    display: none;
/*    position: absolute;*/
text-align:center;
    background-color: #fff400;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #dadada}

.show {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

        <img src="img/fastcall150.png" class="round test" />
        <img src="img/gesturecall150.png"  class="dropbtn round" />
       
       <div id="myDropdown" class="dropdown-content">
            <a href="javascript:myFunc()"> Shake Gesture</a>
        </div>

Answer 2

Here is an updated snippet.

1. There is an typo myFunction(); on the first image's onclick. It should be myFunctio();.

2. You would need to add the class dropbtn to the first image

   or

   change if (!event.target.matches('.dropbtn')) { to if (!event.target.matches('#round')) {

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

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('#round')) {
    document.getElementById("myDropdown").classList.toggle("show");
  }
}

.dropbtn {
  cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
  background-color: #3e8e41;
}
.dropdown {
  position: relative;
  */ display: inline-block;
  */
}
.dropdown-content {
  display: none;
  /*    position: absolute;*/
  text-align: center;
  background-color: #fff400;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {
  background-color: #dadada
}
.show {
  display: block;
}

<img src="img/fastcall150.png" id="round" onclick="myFunctio();" />
<img src="img/gesturecall150.png" id="round" onclick="myFunctio();" class="dropbtn" />


<div id="myDropdown" class="dropdown-content">
  <a href="javascript:myFunc()"> Shake Gesture</a> 
</div>