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 &times;

Solution

The .style property of a HTML element shows only the inline style the element has. That's the styles added to the element directly with <a style="display: block;" /> or with Javascript element.style.display = "block";, so the problem you are having is that you are receiving an undefined when accessing style.display, so your style.display === "block" or "none" will never be true. As a programmer tip, the first thing to do with that kind of problem is to put a console.log inside your openModal and closeModal functions to check if they are being called, and also check if the code is running as you expect. With a console.log(model.style.display) you will noticed that.

To get the computed CSS style, you must call window.getComputedStyle(element); (DOC here), but that's pretty CPU consuming and not so good practice actually when you have nice CSS, so the best way you can do is to assume an initial state (if there's no display state, then assume is none), or use classes (which is the way I recommend, from my experience), like so:

.modal {
    display: none;
    position: fixed;
    &-content {
        display: block;
        &-close {
            display: block;
        }
    }
    &.shown { // Notice the shown class I added here
        display: block;
    }
}

Then you can add or remove the .shown class to the modal, and it will hide and show on your convenience:

const openModal = () => {
    if(!modal.classList.contains("shown")) {
        modal.classList.add("shown");
    }
};
const closeModal = () => {
    if(modal.classList.contains("shown")) {
        modal.classList.remove("shown");
    }
}

By the way, add and remove will already do a contains internally (more or less), so you don't need to check for that:

const openModal = () => {
    modal.classList.add("shown");
};
const closeModal = () => {
    modal.classList.remove("shown");
}

NOTE: It is better to use classes for your styling instead of modifying the inline style because in the future you can change the style to show with animations (for example) without needing to change anything from Javascript.