you can change it to toggle too since you should only use this function once for adding the event listener

function toggleNav() {
    const open = document.querySelector('#open');
    const close = document.querySelector('#close');
    const nav = document.querySelector('nav');
    
    open.addEventListener('click', () => {
        nav.style.display = 'block';
        close.style.display = 'block';
        open.style.display = 'none';
    })
    
    close.addEventListener('click', () => {
        nav.style.display = 'none';
        close.style.display = 'none';
        open.style.display = 'block';
    })
}
toggleNav();

#close, nav {
  display:none;
}

<button id="open">Open nav</button>
<button id="close">Close nav</button>
<nav>Nav</nav>

a few more errors:

if (nav.style.display === 'block') {
   open.style.display = 'none';
} else {
   open.style.display == 'block'; // This is a comparison
}

You are not setting the open button back to block when the nav is closed. Try this code instead:

function openNav() {
    let open = document.querySelector('#open');
    open.addEventListener('click', () => {
        let nav = document.querySelector('nav');
        nav.style.display = 'block';
        open.style.display = 'none';
        close.style.display = 'block';
        /*
        if (nav.style.display === 'block') {
            open.style.display = 'none';
        } else {
            open.style.display == 'block';
        }
        */
    })
}
openNav();

function closeNav() {
    let close = document.querySelector('#close');
    close.addEventListener('click', () => {
        let nav = document.querySelector('nav');
        nav.style.display = 'none';
        open.style.display = 'block';
        close.style.display = 'none';
        /*
        if (nav.style.display === 'block') {
            close.style.display = 'block';
        } else {
            close.style.display = 'none';
        }
        */
    })
}
closeNav();

I think you are assuming that the if block is monitoring the display. However, it does not, it only checks it once in the function call.

This seems like a simple idea to me clearly I’m missing something here and any advice on what is wrong would be appreciated. I have created a simple modal that will pop up when the button is clicked. I assumed by using an If/else statement in the JS function i could just chose to set the button ti show or to disappear. I know of work arounds for this but I’m curious why this solution will not work

function openNav() {
    let open = document.querySelector('#open');
    open.addEventListener('click', () => {
        let nav = document.querySelector('nav');
        nav.style.display = 'block';
        if (nav.style.display === 'block') {
            open.style.display = 'none';
        } else {
            open.style.display == 'block';
        }
    })
}
openNav();

function closeNav() {
    let close = document.querySelector('#close');
    close.addEventListener('click', () => {
        let nav = document.querySelector('nav');
        nav.style.display = 'none';
        if (nav.style.display === 'block') {
            close.style.display = 'block';
        } else {
            close.style.display = 'none';
        }
    })
}
closeNav();

the button does work to open the modal after it is closed tho the “open” button does not re appear.