addEventListener 'click' works only once

Question

I'm struggling with something that might be a basic thing. The event bound to the button (code below) only works once. After that, nothing seems to happen again on button click. I have treated the wanted behavior in the first if statement of the blur function, but since it does not execute a second time, it seems purposeless.

    <button type="button" id="openModal">Open Modal</button>
    <p>some text</p>
    
    <script>

        class ModalContent{
            constructor(title, text){
                this.title = title;
                this.text = text;
            }
        }
        var modalObject = new ModalContent("this is the modal title", "and this is its inner text");


        var openModal = document.querySelector("#openModal");
        var body = document.querySelector("body");
        var lorem = document.querySelector("p");

        openModal.addEventListener('click', blur);

        function blur(event){
            if(body.querySelector("#modal") != null){
                var modal = body.querySelector("#modal");
                console.log(modal);
                modal.style.display = "flex";
            }

            body.innerHTML = '<div id="initial-content">' + body.innerHTML + '</div>'
            var initialContent = body.querySelector("#initial-content");
            initialContent.style.filter = "blur(5px)";
            // Replaced this, that does NOT work as desired in JS
            // body.innerHTML = body.innerHTML + '<div id="modal"></div>';
            // With this:
            initialContent.insertAdjacentHTML('afterend', '<div id="modal"></div>');

            var modal = body.querySelector("#modal");
            modal.innerHTML = 
                '<h2 id="modal-title">' + modalObject.title + "</h2>" + '<div id="modal-text">' + modalObject.text + "</div>"
                + '<button id="close-modal">Close this</button>';

            modal.querySelector("#modal-text").style.marginBottom = "20px";

            modal.style = 
                "display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #ccc; border-radius: 10px; box-shadow: 0px 1px 8px #ddd; color: black; text-align: center; padding: 60px; position: fixed; top: calc(50% - 206px); /* it's the raw height value */ left: calc(50% - 166.675px); * it's the raw width/2 value *";

            var closeModal = modal.querySelector("#close-modal");
            closeModal.addEventListener('click', closeModalFunction);

            function closeModalFunction(event){
                modal.style.display = "none";

                if(initialContent.style.filter.search("blur") != -1)
                    initialContent.style.filter = "unset";
            }
            console.log("1st");
        }
    </script>
</body>

Answer 1

When you set the innerHTML of the body, all the event listeners on the elements get removed. Instead of adding elements to the body inside the event listener, initially put all the elements in the HTML and show or hide them as necessary.

class ModalContent {
  constructor(title, text) {
    this.title = title;
    this.text = text;
  }
}
var modalObject = new ModalContent("this is the modal title", "and this is its inner text");


var openModal = document.querySelector("#openModal");
var body = document.querySelector("body");
var lorem = document.querySelector("p");

openModal.addEventListener('click', blur);

function blur(event) {
  if (body.querySelector("#modal") != null) {
    var modal = body.querySelector("#modal");
    //console.log(modal);
    modal.style.display = "flex";
  }
  var initialContent = document.getElementById('initial-content');
  initialContent.style.filter = "blur(5px)";
  var modal = body.querySelector("#modal");
  modal.innerHTML =
    '<h2 id="modal-title">' + modalObject.title + "</h2>" + '<div id="modal-text">' + modalObject.text + "</div>" +
    '<button id="close-modal">Close this</button>';

  modal.querySelector("#modal-text").style.marginBottom = "20px";

  modal.style =
    "display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #ccc; border-radius: 10px; box-shadow: 0px 1px 8px #ddd; color: black; text-align: center; padding: 60px; position: fixed; top: calc(50% - 206px); /* it's the raw height value */ left: calc(50% - 166.675px); * it's the raw width/2 value *";

  var closeModal = modal.querySelector("#close-modal");
  closeModal.addEventListener('click', closeModalFunction);

  function closeModalFunction(event) {
    modal.style.display = "none";
    initialContent.style.filter = "unset";
  }
  //console.log("1st");
}

<div id="initial-content">
  <button type="button" id="openModal">Open Modal</button>
  <p>some text</p>
</div>
<div id="modal"></div>