如何通过单击图标更改font-awesome图标的颜色

Question

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>

嗨，我正在尝试通过单击图标来更改font-awesome垃圾桶图标的字体颜色。但是，它不起作用。我很感激如何获得这项工作的任何提示。

<小时/>

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>

的更新 所以感谢大家的帮助，我设法得到了我想要的结果（每次点击不同的图标，只有我点击的图标有不同的颜色）。最重要的是，我很好奇是否有更少的重复或杂乱的方式执行我现在喜欢使用“功能”或其他东西。如果我能得到一些提示，我将不胜感激。

Answer 1

在结束);之后，您错过了}：

＆＃13;

＆＃13;

var garbage = document.getElementById("garbage");

garbage.addEventListener("click",function(){
  garbage.style.color = "#66c144";
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

注意：您不需要定位 父，您只需将id提供给图标。

Answer 2

以下是更改FA图标的其他选项。关键字this代表garbage。 .property或.method()/.function()引用该图标。

参考

.children

.querySelector()

.getElementsByTagName()

.classList

.firstElementChild

演示

＆＃13;

＆＃13;

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);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您在事件监听器后缺少右括号：

var garbage = document.getElementById("garbage");

garbage.addEventListener("click",function(){
    garbage.style.color = "#66c144";
});