I cannot manipulate CSS display property with JS?

I'm trying to set the display value of a modal to block after clicking to the call button. I couldn't figure out why the JS sheet couldn't change it even if I double-checked (What I mean is to check the values by window console and check if it matches to JS sheet that I wrote) if I made a spelling mistake or named an element differently but I'm sure there is no mistake. Once I thought the onclick = () => method might not work well and I used addEventListener() instead. I'm sure that when I code it in the window console it successfully changes the display to block and I'm sure too that it's displayed on other elements as a normal modal so it's not hidden as well. I've surfed on some forums that include the beginner-level problems such as writing style.display = block instead of style.display: "block" but couldnt find anywhere a similarity. I've still been thinking that there's something wrong in my notations of class/id.

So here's the code: (index.scss)

.call {
    position: fixed;
    display: block;
}

.modal {
    display: none;
    position: fixed;
    &-content {
        display: block;
        &-close {
            display: block;
        }
    }    
}

(index.js)

var call = document.querySelector("#call");
var modal = document.querySelector("#modal");
var close = document.querySelector("#close");
const openModal = () => {
    if(modal.style.display === "none") {
        modal.style.display = "block";
    }
};
const closeModal = () => {
    if(modal.style.display === "block") {
        modal.style.display = "none";
    }
}
call.addEventListener("click", openModal);
modal.addEventListener("click", closeModal);

(index.pug)

.call#call Iletisim
.modal#modal
    .modal-content#content
        span.modal-content-close#close ×