var garbage = document.getElementById("garbage");
garbage.addEventListener("click",function(){
garbage.style.color = "#66c144";
}<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<div id="garbage">
<i class="fas fa-trash"></i>
</div>Bonjour, j'essaie de changer la couleur de la police pour l'icône de la corbeille de police en cliquant sur l'icône. Cependant, cela ne fonctionne pas. J'apprécierais tout conseil sur la façon d'obtenir ce travail.
var trash = document.getElementById("trash"),
glass = document.getElementById("glass"),
organic = document.getElementById("organic"),
plastic = document.getElementById("plastic"),
paper = document.getElementById("paper");
trash.addEventListener("click",function(){
this.children[0].style.color = "#66c144";
glass.children[0].style.color = "#ffffff";
organic.children[0].style.color = "#ffffff";
plastic.children[0].style.color = "#ffffff";
paper.children[0].style.color = "#ffffff";
});
glass.addEventListener("click",function(){
this.children[0].style.color = "#66c144";
trash.children[0].style.color = "#ffffff";
organic.children[0].style.color = "#ffffff";
plastic.children[0].style.color = "#ffffff";
paper.children[0].style.color = "#ffffff";
});
organic.addEventListener("click",function(){
this.children[0].style.color = "#66c144";
trash.children[0].style.color = "#ffffff";
glass.children[0].style.color = "#ffffff";
plastic.children[0].style.color = "#ffffff";
paper.children[0].style.color = "#ffffff";
});
plastic.addEventListener("click",function(){
this.children[0].style.color = "#66c144";
trash.children[0].style.color = "#ffffff";
glass.children[0].style.color = "#ffffff";
organic.children[0].style.color = "#ffffff";
paper.children[0].style.color = "#ffffff";
});
paper.addEventListener("click",function(){
this.children[0].style.color = "#66c144";
trash.children[0].style.color = "#ffffff";
glass.children[0].style.color = "#ffffff";
organic.children[0].style.color = "#ffffff";
plastic.children[0].style.color = "#ffffff";
});<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<div class="icons flex">
<div id="trash">
<i class="fas fa-trash"></i>
</div>
<div id="glass">
<i class="fas fa-wine-glass"></i>
</div>
<div id="organic">
<i class="fab fa-envira"></i>
</div>
<div id="plastic">
<i class="far fa-hdd"></i>
</div>
<div id="paper">
<i class="far fa-newspaper"></i>
</div>
</div>
3
Jun Jung
16 avril 2018 à 14:28
3 réponses
Meilleure réponse
Voici quelques autres options pour changer une icône FA. Le mot clé this représente garbage. Le .property ou .method()/.function() fait référence à l'icône.
Les références
Démo
var garbage = document.getElementById("garbage");
garbage.addEventListener("click", function() {
this.children[0].style.color = "#66c144";
this.querySelector('.fas').style.fontSize = '3rem';
this.getElementsByTagName('I')[0].classList.toggle('fa-spin');
this.firstElementChild.style.transition = 'color 1.5s ease 1.25s, font-size 0.75s ease-out';
}, false);<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<div id="garbage">
<i class="fas fa-trash"></i>
</div>
2
zer00ne
16 avril 2018 à 13:26
Il manque la parenthèse fermante après votre écouteur d'événement:
var garbage = document.getElementById("garbage");
garbage.addEventListener("click",function(){
garbage.style.color = "#66c144";
});
0
Sam L
16 avril 2018 à 11:30
Il vous manque le ); après la clôture }:
var garbage = document.getElementById("garbage");
garbage.addEventListener("click",function(){
garbage.style.color = "#66c144";
});<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<div id="garbage">
<i class="fas fa-trash"></i>
</div> Remarque: Vous n'avez pas besoin de cibler le parent , vous pouvez simplement donner le id à l'icône.
4
VXp
16 avril 2018 à 11:45
Questions connexes
Questions liées
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.