How can I implement a feature in the Khan Academy environment where a dropdown box disappears if the user clicks outside of it, but remains visible if clicked inside, using JavaScript/CSS/HTML? Despite attempts, the current implementation closes the dropdown even when clicked inside. The code provided uses an event listener attached to the document’s click event to hide the dropdown if the clicked element is not the dropdown itself or the account image. What might be causing this issue, and how can it be addressed to achieve the desired functionality within the constraints of the Khan Academy environment? Here is the code I’ve attempted:

JavaScript:

  // Function to open the account dropdown
  function openAccdrpdwn() {
    document.getElementById("acc-drpdwn").style.display = "block";
  }// Event listener to open the account dropdown when clicking on the account image
  document.getElementById('account-signin').addEventListener('click', openAccdrpdwn);
// Function to open the account dropdown

  

  

// Event listener to close the account dropdown when clicking outside of it
document.onclick = function(event) {
    var dropdown = document.getElementById("acc-drpdwn");
    var accountImage = document.getElementById("account-signin");
    
    if (event.target !== dropdown && event.target !== accountImage) {
        dropdown.style.display = "none";
    }
};

Html:

<button class="account-image" id ="account-signin">
        <img id="account-image" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png" alt="Sample User Icon">
        </button>
<div id= "acc-drpdwn">
      <div id = "account"></div>
    <div id = "inside-account"></div>
    </div>

Css:

#account{
        background-color:rgb(247, 247, 247);
        width:175px;
        height:300px;
        border-radius:17px;
        position:absolute;
        top:68px;
        left:408px;
        box-shadow: 0px 0px 7px 3px lightgray;
        z-index:1;
            }
    #inside-account{
        background-color:rgb(209, 255, 215);
        width:175px;
        height:80px;
        border-top-right-radius:17px;
        border-top-left-radius:17px;
        position:absolute;
        top:68px;
        left:408px;
        z-index:2;
            }
    
    #acc-drpdwn{display:none;}
    .account-image {
    
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      left: -28px;
      top: 1.8px;
      cursor: pointer;
    }
    #account-image {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #ccc;
      position: absolute;
      left: -2px;
      top: -2.2px;
      float:left;
    }

However, this code doesn’t seem to work as expected. The box still disappears even when clicked inside of it. Can you provide guidance on how to properly implement this functionality within the constraints of the Khan Academy environment?