I can’t change my style.display attribute through javascript

So, I wrote a piece of functional code in html and css with no display values, but if I try to change them through javascript, it only works outside an if statement that I put it into, even if the if statement is true (tried checking it through console.log).

Here’s my js:

function toggleShowContact() {
  console.log(`${contactForm.style.display}`);
  contactForm.style.display = "flex";
}

html:

<div class="contact-form">
        <div style="font-size: 20px">
          <button class="btn-close" onclick="closeAll()">X</button>
          <h1 style="text-align: center">Contact Us</h1>
        </div>
        <form>
          <input
            name="name"
            type="text"
            class="feedback-input"
            placeholder="Name"
          />
          <input
            name="email"
            type="text"
            class="feedback-input"
            placeholder="Email"
          />
          <textarea
            name="text"
            class="feedback-input"
            placeholder="Comment"
          ></textarea>
          <div class="action">
            <button class="contact-submission-btn">SUBMIT</button>
          </div>
        </form>
      </div>

I tried going past it in numerous other ways, but didn’t work. As a matter of fact, the following code works:

function closeAll() {
  loginForm.style.display = "none";
  registrationForm.style.display = "none";
  contactForm.style.display = "none";
}


function toggleShowLogin() {
  closeAll();
  if (loginForm.style.display === "none" && loggedIn === false) {
    loginForm.style.display = "flex";
  }
}

function toggleShowRegistration() {
  closeAll();
  if (registrationForm.style.display === "none") {
    registrationForm.style.display = "flex";
  }
}