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 réponses
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>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";
});
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.
Questions connexes
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.