clicking JS popup close button refreshes page and displays popup again

why is this happening and how can I fix this, so that upon clicking close button of popup, page does not refresh and popup vanishes. I’ve tried using cookies and local variable and this issue still persists.

note: In .show-popup, display property is none

the html code

   <div id="popup-overlay" > </div>
   <div id="popup-greeting" >
  <img src="...." alt="Greeting Image"/>
  <button id="closeButton">Close</button> 
</div>

var popupDisplayed = localStorage.getItem("popupDisplayed");
 window.addEventListener("load", function(){
    if (popupDisplayed !== "true") {
    var popupOverlay = document.getElementById('popup-overlay');
    var popupGreeting = document.getElementById('popup-greeting');
    
    popupOverlay.style.display = 'none';
    popupGreeting.style.display = 'none';
    popupDisplayed.style.display = 'none';

        // If the popup has not been displayed before, show it after a delay
        setTimeout(function() {
            var popupOverlay = document.getElementById('popup-overlay');
            var popupGreeting = document.getElementById('popup-greeting');
            
            popupOverlay.style.display = 'block';
            popupGreeting.style.display = 'block';
        }  
        ,  100000);

        // Store a flag indicating that the popup has been displayed
        localStorage.setItem("popupDisplayed", "true");
    } 
 });

    document.querySelector("#closeButton").addEventListener("click", function(){    
        var popupOverlay = document.getElementById('popup-overlay');
        var popupGreeting = document.getElementById('popup-greeting');

        popupOverlay.style.display = 'none';
        popupGreeting.style.display = 'none';
        
        const var = popupOverlay.style.display;
        alert(popupOverlay.style.display);

        popupOverlay.style.opacity = '0';
        popupGreeting.style.opacity = '0';
        
                
 }
 );