Utiliser une classe SCSS imbriqué

zancanaro
Javascript

Salut à vous,
Je cherche comment céer un événement en JS qui changerait la classe d'un bouton quand on clic. Je débute en solo le JS.
J'y suis parvenu en utilisant une classe CSS mais pas en utilisant une classe imbriquée, SCSS.
Le nez dessus depuis plusieurs jours, sans avoir suffisamment de basses je ne trouve pas.

HTML

<section class="clic">
        <h2>CHANGEMENT DE COULEUR AU CLIC essai 2</h2>
        <button type="button" id="button-clic" class="button-color">Cliquez sur moi ...</button> 

    </section>

<script src="app.js"></script>
</body>

SCSS

.button-color {
  display: block;
  font-size: 2rem;
  background-color: #e4d93f;
  padding: 2rem;
  margin: 50px auto;
  border-radius: 3px;
  box-shadow: 5px 5px 5px rgba(40, 100, 63, 0.384);
}
.button-color .btnew-color {
  background-color: #4c00ff;
}

JavaScript

let color=document.getElementById('button-clic'); 
color.addEventListener('click', function(){
       console.log('j\'ai cliqué');
       this.classList.toggle('button-color, btnew-color'); 
/* c'est ici que je ne sais pas comment cibler la class .button-color .btnew-color*/
})

3 réponses

zancanaro
Auteur

J'ai trouvé la solution, enfin quelqu'un sur un autre forum à detecté les erreurs.
1 - Pas de caractères spéciaux dans les noms de class avec toggle;
2 - Enlever l'espace entre le nom du parent et de l'enfant dans les classes imbriqués. Ce point est compliqué parce que je génére le code avec SASS. pour l'instant je ne vois pas comment le configurer.

Defy

heu... l'indentation ne te pose aucun problème pour manipuler ton contenu, tu as dû louper quelques choses ailleurs dans ton code. Parce que les espaces ne génèrent aucun problème dans l'utilisation de tes class en js.

Mickael Christine

Humm si j'ai bien compris ton explication, ce que tu souhaites c'est ajouter la classe btnew-color à ton bouton ayant déjà la classe button-color pour changer le background.

Du coup fait juste un toggle de btnew-color, le toggle permet d'ajouter si la classe n'est pas présente et de supprimer si elle y est.
Ta classe button-color elle ne bougera pas.

let color=document.getElementById('button-clic'); 
color.addEventListener('click', function(){
       console.log('j\'ai cliqué');
       this.classList.toggle('btnew-color'); 
/* c'est ici que je ne sais pas comment cibler la class .button-color .btnew-color*/
})

Par ailleurs dans ton scss tu peux la définir ta classes comme ceci.

.button-color {
  display: block;
  font-size: 2rem;
  background-color: #e4d93f;
  padding: 2rem;
  margin: 50px auto;
  border-radius: 3px;
  box-shadow: 5px 5px 5px rgba(40, 100, 63, 0.384);

    &.btnew-color {
        background-color: #4c00ff;
    }
}