bouton clique

Mohammed Hathouti
Les bases HTML/CSS
Javascript

Bonjour,

Alors, tout d'abord bonjour, je suis en phase d'apprentisssage et je suis en train de cree un site issue d'une maquette Figma. C'est un redesign de facebook. Sur ce site il y a un boutton like sur lequel j'ai mis une fonction js pour changer la couleur du bouton lorsqu'on clique dessus 

js***
function initElement()
{
  var like = document.getElementById("like");
  var pouce = document.getElementById("pouce");
  like.onclick = liked;

};
function liked(){
    like.style.backgroundColor = "#E5E6EB";
    like.style.color = "black";
    pouce.style.background = "url(likes/Union-black.svg)";
}

html***
<body on load="initElement();">
    <button class="like" id="like"> <span id="pouce"></span> Liked</button>
    <script src="script.js"></script>
</body>

css***
.like{
    width: 110;
    height: 36px;
    cursor: pointer;
    border: none;
    background-color: #E9F3FE;
    color: var(--fb-color);
    font-size: 17px;
    border-radius: 8px;
    outline: none;
}
.like span{
    content: '';
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url(likes/Union.svg);
    vertical-align: middle;
    margin-top: -2px;     
}

Ce que je veux

Tout se passe comme prevu lorsque je clique sur le bouton il passe du bleu au gris, mais je voulais savoir si il était possible de passer d'un état à l'autre à chaque clique comme lorsque je like une vidéo de grafikart sur youtube le bouton est gris puis il devient bleu puis si je reclique sur le bouton redeviens gris etc ... Je peux m'amuser comme ça pendant longtemps, mais rassurez-vous le bouton est toujours bleu là.

Merci d'avance !

6 réponses

DarkenNights

Salut,

La solution serait qu'au moment ou tu clique sur le bouton, regardez si la couleur du bouton est bleu ou gris.

S'il est bleu tu le mets gris et inversement s'il est gris tu le mets bleu :)

Tu peux aussi faire ça en rajoutant une class à ton bouton "btn-grey" et "btn-blue". Ensuite tu refait une verification, mais cette fois si sur le nom de la class plutot que sur la couleur du bouton et tu changes la class quand il faut !

Par exemple tu peux faire ça :

function liked(){
    if(like.style.backgroundColor === "#E9F3FE") {
        like.style.backgroundColor = "#E5E6EB";
    }
    else {
        like.style.backgroundColor = "#E9F3FE";
    }
    like.style.color = "black";
    pouce.style.background = "url(likes/Union-black.svg)";
}

A toi de voir ce que tu préfères :)

Mohammed Hathouti
Auteur

Merci pour ta reponse j'ai finalement opter pour la solution qui consiste a crée deux classe btnblue et btnblack j'ai un autre probleme :

js***

function initElement(){

var btn = document.getElementById("btn-blue");
btnblue.onclick = btn;
};

function btn(){

if(btn.style.classList == "btn-black") {
    btn.style.classList="btn-bleu";
}

else {
    btn.style.classList="btn-black";
}
}

css**

.btn-blue{

    width: 110;
    height: 36px;
    cursor: pointer;
    border: none;
    background-color: #E9F3FE;
    color: #0572EF;
    font-size: 17px;
    border-radius: 8px;
    outline: none;
}

.btn-black{

  width: 110;
  height: 36px;
  cursor: pointer;
  border: none;
  background-color: #E5E6EB;
  color: #000000;
  font-size: 17px;
  border-radius: 8px;
  outline: none;
}

.btn-blue span{

  content: '';
  width: 16px;
  height: 16px;
  display: inline-block;
  background: url(icones/Union.svg);
  vertical-align: middle;
  margin-top: -2px;
}

.btn-black span
{

  content: '';
  width: 16px;
  height: 16px;
  display: inline-block;
  background: url(icones/Union-black.svg);
  vertical-align: middle;
  margin-top: -2px;
}

html**

<body onload="initElement()">

    <button class="btn-black" id="btn-blue"> <span id="pouce"></span> Liked</button>

</body>

voici mon code, lorsque la page ce lance j'ai un message d'erreur dans la console qui dit
***script.js:4 Uncaught ReferenceError: btnblue is not defined
at initElement (script.js:4)
at onload (index.html:9)

Azorgh

Hello,

Tu devrais lire les messages d'erreurs !

script.js:4 Uncaught ReferenceError: btnblue is not defined

A la ligne 4, tu fais référence à btnblue, mais btnblue n'existe pas.

Relis toi, prend le temps de lire les erreurs.

Mohammed Hathouti
Auteur

oui je sais, mais le problème c'est que je comprend pas encore très bien les messages d'erreurs, comme je l'ai dis je suis encore en phase d'apprentissage et je me creuse la tête avant de venir demander de l'aide

j'ai regler le problème du btnblue qui n'était pas défini mais là j'ai un autre message d'erreur qui me dit: 

Uncaught TypeError: Cannot read property 'classList' of undefined
    at HTMLButtonElement.btn (script.js:7)

je comprend qu'il ne peut pas lire la propriété 'classList' mais je comprend pas pourquoi (je ne comprend pas la suite du message qui me dit que 'classList' n'est pas definie dan HTMLButtonElement.btn)

*** ligne 7

if(btn.style.classList==="btn-black"){...}
DarkenNights

Salut !

Ton problème est un problème de Scope.
Tu es dans la fonction btn() et tu essaye d'accéder à la variable btn qui est dans la fonction initElement().
Il faut que tu déclare ta variable btn à l'intérieur de la fonction btn OU que tu passe btn en paramètre de la fonction au niveau du onclick.
Voici un exemple :

function initElement(){
    btnblue.onclick = btn;
};

function btn(){
    var btn = document.getElementById("btn-blue");
    if(btn.style.classList == "btn-black") {
        btn.style.classList="btn-bleu";
    }

    else {
        btn.style.classList="btn-black";
    }   
}

L'autre question c'est que tu as cette ligne :

btnblue.onclick = btn;

Ou est-ce que tu déclare btnblue ?

Lartak

Bonjour.

Tout ça est faux, la propriété classList ne retourne pas une chaîne de caractère.

La propriété en lecture seule Element.classList retourne une collection directe DOMTokenList des attributs de classe de l'élément.

Il te faut plutôt faire :

const btn = document.getElementById('btn-blue');
btn.addEventListener('click', () => {
    if (btn.classList.contains('btn-black')) {
        btn.classList.replace('btn-black', 'btn-blue');
    } else {
        btn.classList.replace('btn-blue', 'btn-black');
    }
})

Exemple ici.