2
votes

javascript - Changer la couleur du texte plusieurs fois entre deux plages de couleurs

Je me demandais si quelqu'un pouvait m'aider à changer la couleur du texte plusieurs fois puis à former la couleur # 627CA9 en #FFFFFF et vice versa.

J'ai essayé ceci:

<div style="cursor: pointer;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">CHVRCHES</div>
<div style="cursor: pointer;" onclick="changeColor('myid2'); return false;" id="myid2" class="centered">PVRIS</div>

function changeColor(id) {
  var x = document.getElementById(id);
  if (document.getElementById(id).style.color = "#627CA9")
    document.getElementById(id).style.color = "#FFFFFF"
  else {
    document.getElementById(id).style.color = "#627CA9"; // forecolor
  }

}

Le code ne change la couleur qu'une seule fois.

(Désolé mon anglais)

Merci

javascript html css colors textcolor

7 commentaires

Voulez-vous changer constamment de couleur?

Cela fonctionne donc pour myid1 mais pas pour myid2 ?

oui, plusieurs fois

ne fonctionne pas du tout, change uniquement en #FFFFFF

vous devez comparer avec == et non avec = . En utilisant = le résultat de if est toujours true . Voter pour fermer comme une faute de frappe.

@RobinZigmond Ce n'est pas le seul problème, dans certains navigateurs, la couleur est convertie en RVB, donc la vérification ne fonctionnerait pas de toute façon

@RobinZigmond Marquer un doublon aurait plus de sens

3 Réponses :

1
votes

Le problème est document.getElementById (id) .style.color = "# 627CA9" changez-le en document.getElementById (id) .style.color == "# 627CA9" , Vous devriez également utiliser des classes et changer le nom de la classe

<div class="change-color">CHVRCHES</div>

@keyframes color-change {
  0% {
    color: #627CA9;
  }
  50% {
    color: #FFFFFF;
  }
  100% {
    color: #627CA9;
  }
}

.change-color {
  animation-name: color-change;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

<div style="cursor: pointer;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">CHVRCHES</div>
<div style="cursor: pointer;" onclick="changeColor('myid2'); return false;" id="myid2" class="centered">PVRIS</div>

Vous pouvez également faire l'action automatiquement avec CSS

div {
  color: #627CA9;
}

.white {
  color: #FFFFFF;
}

function changeColor(id) {
  var x = document.getElementById(id);
  if (x.className === "white") x.className = "";
  else x.className = "white";
}

0 commentaires

1
votes

Vous devez comparer les valeurs, pas les attribuer. Dans la condition, mettez deux signes égaux.

if (document.getElementById(id).style.color == "#627CA9")

UPD: De plus, généralement lors du réglage de la couleur en utilisant javascript, il est converti en RVB, donc une comparaison supplémentaire avec HEX n'est plus possible. Vous devrez comparer et définir les valeurs en RVB, mais ce n'est pas une bonne pratique. La meilleure solution serait de créer une classe supplémentaire et de la styliser via CSS, ce qui vous permettra de vérifier la présence d'une classe sur un élément et, sur cette base, de supprimer ou d'ajouter cette classe.

0 commentaires

3
votes

Outre le fait que vous attribuez la couleur avec " = " au lieu de la vérifier avec " == ", la couleur est également définie comme RVB . Cette vérification semble fonctionner;

<div style="cursor: pointer;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">CHVRCHES</div>
<div style="cursor: pointer;" onclick="changeColor('myid2'); return false;" id="myid2" class="centered">PVRIS</div>

function changeColor(id) {
  var x = document.getElementById(id);
  
  if (x.style.color != "rgb(255, 255, 255)")
    x.style.color = "#FFFFFF";
  else {
    x.style.color = "#627CA9"; // forecolor
  }

}

0 commentaires