I have an alert box that has its own close button. I didn’t know users would be placing multiple instances of it on a web page.
Currently, when the close button of an element is clicked, only the first instance gets hidden. I can’t close the other one after that. When I click its close button, nothing happens.
I want to be able to click each element’s close button to hide that element and have the ability to hide the elements one at a time. I feel like it has something to do with the THIS keyword, but I’m not sure.
Here’s my JavaScript code. Can anyone please help? Thank you.
const alert = document.querySelector('#dcom-c-alert');
const hideAlert = document.querySelector('.dcom-c-close-alert-wrapper');
function closeAlert() {
alert.classList.add('hide');
}
hideAlert.addEventListener('click', function () {
closeAlert();
});
hideAlert.addEventListener("keydown", e => {
// ADA: Next button activates with spacebar or enter key
if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
closeAlert();
}
});