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>
MISE À JOUR
2
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

.enfants

.querySelector ()

.getElementsByTagName ()

.classList

.firstElementChild


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