setInterval that changes innerHTML seems to interfere with EventListener?

I have an interesting behavior where a timer that’s changing innerHTML of a div seems to invalidate a previously added EventListener. Should I be re-adding the EventListener every time innerHTML gets updated?

If you wait 5 seconds on the JSFiddle and then try to click ‘Settings’ nothing will happen …

HTML:

<div class="header left font13" id="setup">Settings</div>
<div class="header mid font13" id="wtime"></div>

JavaScript:

document.getElementById("setup").addEventListener("click", function() {
  console.log("Settings!");
});

setInterval(function() {
  console.log("Alive!");
  document.getElementById("wtime").innerHTML = "11:45".replaceAll(":", "<span class='blink'>:</span>");
}, 5000);

https://jsfiddle.net/pog0h29t/

>Solution :

Your eventlistener is working fine. This is not a JS problem, but a CSS problem. Your wtime thing is block the Settings div.