Problème avec setAttribute

Bonjour j'ai écrit une fonction qui change la valeur des class de deux div quand on clique dessus, le deuxième bouton fonctionne correctement mais le premnon? j'ai beau chercher la petite érreur je ne vois pas, pouvez-vous me dire ce que vous voyez comme érreur vous? merci.

 <div class="categorie-container">
        <div class= "categorie-selected" id="categorie-1">Afficher la catégorie 1</div>
        <div class= "categorie-not-selected" id="categorie-2">Afficher la catégorie 2</div>
 </div>

 <script>

 //ici c'est la fontion pour le premier bouton afficher la catégorie 2, sa fontionne pas du //tout
 let categorie1= document.getElementById('categorie-1');
classCategorie1=categorie1.getAttribute('class');
console.log('voici categorie1 '+classCategorie1);

let categorie2= document.getElementById('categorie-2');
classCategorie2=categorie2.getAttribute('class');
console.log('voici categorie2 '+classCategorie2);

categorie1.addEventListener('click',function(){
if(classCategorie1=="categorie-not-selected" && classCategorie2=="categorie-selected"
){
    categorie1.setAttribute('class','categorie-selected');
    categorie2.setAttribute('class','categorie-not-selected');
}
})
// ici c'est la fontion pour le deuxième bouton afficher la catégorie 2, sa fontionne sans problème
categorie2.addEventListener('click',function(){
if(classCategorie2=="categorie-not-selected" && classCategorie1=="categorie-selected"){
    categorie1.setAttribute('class','categorie-not-selected');
    categorie2.setAttribute('class','categorie-selected');
}
})
 </script>