- Joined
- Sep 12, 2022
- Messages
- 39
- Reaction score
- 0
I display a div via a button, the div has a close X that works in closing it. However I want clicking anywhere on the window to also close the shown div, but this doesn't work. What's the fix to my code?
JavaScript:
// variables
const showHidden = document.querySelector('.show-hidden button');
showHidden.setAttribute('id', 'showHiddenID');
showHidden.classList.add('showHiddenClass');
console.log(showHidden);
const hiddenItSelf = document.querySelector('.show-hidden div');
hiddenItSelf.classList.add('hiddenItSelf-class');
hiddenItSelf.setAttribute('id', 'hiddenItSelfID');
console.log(hiddenItSelf);
const closeX = document.querySelector('.show-hidden div p span');
closeX.classList.add('closeX-class');
console.log(closeX)
// using variables
showHidden.addEventListener('click', function () {
hiddenItSelf.style.display = 'block';
})
closeX.addEventListener('click', function () {
hiddenItSelf.style.display = 'none';
})
window.addEventListener('click', function(e) {
console.dir(e.target);
if (e.target === hiddenItSelf) {
hiddenItSelf.style.display = 'none';
}
})
CSS:
*, body{
box-sizing: border-box;
margin: 0;
}
.show-hidden{
box-sizing: border-box;
height: 100vh;
overflow-x: hidden;
background-image: url('dom-manipulation.png');
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
outline: 1px solid black;
}
.show-hidden div p span{
font-size: 25px;
}
.show-hidden div p span:hover{
cursor: pointer;
color: red;
}
/* initial display set to none*/
.hiddenItSelf-class{
display: none;
}
#hiddenItSelfID{
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);
top: 70%;
border: 1px solid white;
background-color: white;
width: 150px;
text-align: center;
padding: 20px 5px;
font-size: 20px;
font-weight: bold;
animation-name: example;
animation-duration: 7s;
}
.hiddenItSelf-class.showHiddenClass{
display: block;
width: fit-content;
margin: auto;
}
#showHiddenID{
background-color: transparent;
color: white;
height: 3rem;
width: 8.5rem;
font-weight: bold;
border: 2px solid white;
border-radius: 10px;
padding: 5px;
transition: .5s;
position: absolute;
bottom: -10%;
left: 10%;
}
#showHiddenID:hover{
background-color: white;
color: black;
cursor: pointer;
}
HTML:
<section class="show-hidden">
<div><p>I am shown <span>×</span></p></div>
<button>Show hidden stuff</button>
</section>