I have a notification bar that features a button in the center that links to another website. There is also a 'close' button on the far right. However, whenever I click the center button, it also triggers the close button.
I tried moving the #close div outside of the #bar div to see if that would solve the issue, but unfortunately it did not work.
var closeBar = document.getElementById("close");
var bar = document.getElementById("bar");
if (closeBar) {
addEventListener('click', function() {
bar.classList.add('superHidden');
})
}#bar {
position: fixed;
width: 100vw;
display: flex;
height: 50px;
bottom: 0px;
left: 0px;
}
ul {
display: flex;
justify-content: center;
height: 100%;
list-style: none;
}
li {
margin: auto 0;
font-size: 22px;
}
#close {
position: fixed;
right: 20px;
bottom: 0;
z-index: 1000;
height: 50px;
width: 25px;
cursor: pointer;
}
.superHidden {
display: none!important;
}<div id="bar">
<ul>
<li><a target="_blank" href="google.com"><button >Google</button></a></li>
</ul>
<div id="close">
<ul>
<li>X</li>
</ul>
</div>
</div>