Is there a way to hide absolute div with JS?

Question

I have this .endGame div which I wanna hide and then show again when I need it. So I created .endGameDisplay to hide it but it doesn't work that way and I don't know why. It only hides when display: none; is in .endGame

In java script I want it to be hidden on page opening so i have sth like this:

const endGame = document.querySelector('.endGame');

endGameOff();

//end game on func
function endGameOn() {
    endGame.classList.remove('.endGameDisplay');
}

//end game off func
function endGameOff() {
    endGame.classList.add('.endGameDisplay');
}

I also tried to change classlist.add to .remove to check if I wasn't mistaken but still nothing.

My HTML:

<div class="endGame">
    <h1>You</h1>
    <h2 class="wonORlost">text</h2>
    <h3>Do you want to restar game or go back to the menu?</h3>
    <div class="btns">
         <div class="restart">Restart</div>
         <div class="exit">Exit</div>
    </div>
</div>

My CSS:

.endGame {
        position: absolute;
        z-index: 1;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background: $primary-color;
        color: $white-color;
        border-radius: 25px;
        text-align: center;
        box-shadow: 0 0 15px #333;
        

        .h1 {
            font-weight: $font-bold;
        }

        .h2 {
            font-weight: $font-bold;
            color: lighten($bot-color, 15%);
        }

        .h3 {
            font-weight: $font-normal;
        }

        .btns {
            display: grid;
            justify-content: center;
            justify-items: center;

            .restart {
                background: $green-color;
                cursor: pointer;
                @include transition-ease;
    
                &:hover {
                    background: darken($green-color, 10%);
                    @include transition-ease;
                }
            }
    
            .exit {
                background: $red-color;
                cursor: pointer;
                @include transition-ease;
    
                &:hover {
                    background: darken($red-color, 10%);
                    @include transition-ease;
                }
            }
        }

        &.endGameDisplay {
            display: none;
        }
    }

Answer 1

Remove the period (.) when adding a class. .endGameDisplay should be endGameDisplay:

const endGame = document.querySelector('.endGame');

endGameOff();

//end game on func
function endGameOn() {
  endGame.classList.remove('endGameDisplay');
}

//end game off func
function endGameOff() {
  endGame.classList.add('endGameDisplay');
}

.endGameDisplay {
  display: none;
}

<div class="endGame">
  <h1>You</h1>
  <h2 class="wonORlost">text</h2>
  <h3>Do you want to restar game or go back to the menu?</h3>
  <div class="btns">
    <div class="restart">Restart</div>
    <div class="exit">Exit</div>
  </div>
</div>