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:
// 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";
}
};
#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: 0px;
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;
}
```
<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>
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?
2
Answers
Because
dropdown
has child elements, thatevent.target
does necessarily be itself but its children. What you could do is to test if theevent.target
is a descendent ofdropdown
:Refer to the sample below
You can save the code above as an html file and then open it in browser. This isn’t exact answer to your problem, but you could apply the same logic to your code.
Root element HTML tag has
onclick
event, which get’s the reference to the element to be removed and onclick removes the element.The element itself has
onclick
event which stops the click propagation.