Changing li class with span id in Modal pop up - html

Question

In my html page, I have an external javascript code, that causes a modal to pop up when a project in my html class is clicked. the projects are specified through the li class attribute. I now wish to chance this, so the modal instead pops up when a span id element is clicked. Therfor I have revisited by Javascript code, and changed the li class-attribute (in this case .Project) into the span id attribute (#PopUp. Unfortunately I have not been able to make my code work, through that. Is anyone able to see where I go wrong?
/* Javascript */
window.onload = function() {
span = document.querySelectorAll("#PopUp");
document.querySelectorAll("#PopUp").forEach(LIelm => {
LIelm.addEventListener('click', showHideModal)
})
};
function showHideModal(e) {
if (!e.target.parentNode.matches('#PopUp , .modal-content')) return
e.preventDefault();
let currentParent = e.target.parentNode;
if (currentParent.matches('#PopUp')) {
document.getElementById(currentParent.dataset.modal).style.display = "block";
} else {
currentParent.parentNode.style.display = "";
}
}
/* HTML */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="content">
<div id="contact">
About Contact: c.thornval#live.dk 0045 7158 0488
<br>
<br>
</div>
<ul style="list-style: none;">
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1">Irma Type</span>
<span id="year">2019</span>
<div class="Describtion">
<span id="PopUp">Images</id>
<p style="display:none;">Typedesign<br></p>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Lirma/type.jpg" alt="img" width="100%">
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<p>Some text in the Modal...</p>
</div>
</div>
</div>
</li>

Answer 1

You have a couple of problems, first you cannot use an id because it seems like there would be multiple span elements and id's should be unique, secondly you are using the wrong selectors to determine wether the clicked item is a child of a parent containing a modal and your clicked element is now one level deeper.
Change you javascript code this:
window.onload = function() {
const span = document.querySelectorAll(".PopUp");
span.forEach(LIelm => {
LIelm.addEventListener('click', showHideModal)
})
};
function showHideModal(e) {
const projectNode = e.target.parentNode.parentNode;
if (!projectNode.matches('.Project, .modal-content')) return
e.preventDefault();
if (projectNode.matches('.Project')) {
document.getElementById(projectNode.dataset.modal).style.display = "block";
} else {
projectNode.parentNode.style.display = "";
}
}
Then change #PopUp to .PopUp
...
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1">Irma Type</span>
<span id="year">2019</span>
<div class="Describtion">
<span class="PopUp">Images</id>
<p style="display:none;">Typedesign<br></p>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Lirma/type.jpg" alt="img" width="100%">
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<p>Some text in the Modal...</p>
</div>
</div>
</div>
</li>
...