Event listener on span requires me to refresh the page in order for it to be clickable

Question

I have this problem which I know is a bug, if anyone has had the same problem could you explain it, essentially the span "excla" requires the user to refresh the page before they can click on it, after the user refreshes the page they can click on it how many times they want, I am trying to make it clickable from the get go, does anyone know why this is happening?

<div class="popupz" id="popupx" href="javascript:void(0);" href="javascript:;">
<span class="popuptext" id="myPopup">Content</span>

<span id="excla" class="ddop" onclick="myFunctionz()" style="background-color:#fff;" 
href="javascript:void(0);" href="javascript:;">
!
</span>
</div>
<script>

// When the user clicks on div, open the popup
const element = document.getElementById("excla");
element.addEventListener("click", function() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
});
</script>

Answer 1

You seem to have a lot of extraneous code. I've trimmed it down to the minimum to show and hide myPopup

You just need to add in some css.

// When the user clicks on div, open the popup
const element = document.getElementById("excla");
element.addEventListener("click", function() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
});

#myPopup
{
visibility:hidden;
}

#myPopup.show
{
visibility:visible;
}

<div class="popupz" id="popupx">
<span class="popuptext" id="myPopup">Content</span>

<span id="excla" class="ddop" style="background-color:#fff;">
!
</span>
</div>

---