Why is the e.target not working here?

[Atman Atos]

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?

// 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';
    }
  })

*, 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;
}

<section class="show-hidden">
    <div><p>I am shown <span>&times;</span></p></div>
    <button>Show hidden stuff</button>
</section>

 

[Atman Atos]

Solved: I have figured it out, the e.target part should be the code below as opposed to what I wrote initially. I also added a new variable, it works now.

const container = document.querySelector('.show-hidden');
window.addEventListener('click', function(e) {
    console.dir(e.target);
    if (e.target === container) {
        hiddenItSelf.style.display = 'none';
    }
  })