如何通过单击图标更改字体真棒图标的颜色

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>

您好，我正在尝试通过单击图标来更改字体真棒垃圾图标的字体颜色。但是，它不起作用。我将不胜感激有关如何完成这项工作的任何提示。

---

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

您在关闭} 后缺少);：

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>

注意：你不需要定位父，你可以给图标id。 p>

Answer 2

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

参考文献

.children

.querySelector()

.getElementsByTagName()

.classList

.firstElementChild

---

演示

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>

Answer 3

您的事件侦听器后面缺少右括号：

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

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