HTML et javascript : probleme avec les popup

Bonjour,

voila j'ai pris un code pour faire des popup mais ne retourne qu'il n'y arrive pas.
J'ai pourtant chercher des solution. J'ai essaye de prendre le programme tout fais sur le forum, il fonctionne mais des que je l'adapte a mon code, il ne fonctionne plus

Voici le code html

<!DOCTYPE html>
<html lang="en">
<head>
    <?php include('head.php'); ?>
</head>
<body>
    <div class="div-nav">
        <img src="img/logo.PNG" alt="logo" class="div-nav-img">
        <h1 class="div-nav-h1">PassHash</h1>
        <div class="div-nav-div">
            <button id="btn-img-user" class="hide" ><img src="img/user.png" alt="user-img" class="user-img" title="Se Connecter"></button>
            <div id="pop-user" style="position: absolute;display: none;">
                <h6>cc</h6>
            </div>
            <span class="div-nav-div-span"></span>
            <button id="btn-img-add-user" class="hide"><img src="img/add-user.png" alt="add-user-img" class="add-user-img" title="S'inscrire"></button>
        </div>
    </div>
</body>
<script src="popup-user.js"></script>
</html>

Et la le code css :

body{
    background-color:darkcyan;
    color: bisque;
}

/* entete */
.div-nav{
    background-color: cadetblue;
    padding-left: 5px;
    border-radius: 20px;
    left: 0px;
    right: 0px;
    height: 75px;
    position: relative;

}

.div-nav-h1{
    font-size: 25px;
    padding-top: 20px;
}
.div-nav-img{
    width: 50px;
    height: 50px;
    padding: 10px;
    float: left;
}

    /* user */
.user-img{
    width: 20px;
    height: 20px;
    float: left;
    padding: 2px;
    border: 2px solid rgb(27, 206, 212);
    background-color: rgb(27, 206, 212);
    border-radius: 50px;
}
.add-user-img{
    width: 20px;
    height: 20px;
    float: left;
    padding: 2px;
    border: 2px solid rgb(27, 206, 212);
    background-color: rgb(27, 206, 212);
    border-radius: 50px;
}
.div-nav-div{
    width: 150px;
    position: absolute;
    transform: translateY(-50%);
    top: 25%;
    right: 0%;
}
.div-nav-div-span{
    color: black;
    border-left: 2px solid #000;
    display: inline-block;
    height: 25px;
    margin: 0 5px;
    float: left;
}

.hide{
    float: left;
    background-color: cadetblue;
    border: none;
}
.show{
    float: left;
    background-color: cadetblue;
    border: none;
}

Et enfin le code JavaScipt :

var popup = document.getElementById("pop-user")
var showpopup = document.getElementById("btn-img-user")
function hidePopupClass(){
    popup.className = "show"
    popup.style.display = "block"
}
function showPopupClass(){
    popup.className = "hide"
    popup.style.display = "none"
}
showpopup.addEventListener("click" , function(){
    switch(popup.className){
        case "hide": 
            hidePopupClass()
        break
        case "show":
            showPopupClass()
        break
        default: 
            alert("Erreur")
    }
})

Je remercie tout ce qui m'aideront.

Cordialement FirPic.