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

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> 

Hi, I am trying to change the font color for font-awesome trash icon by clicking the icon. However, it is not working. I would appreciate any tips on how to get this work.

---

 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> 

UPDATE So Thanks to everyone's help, I managed to get the result I wanted (Every time I click a different icon, only the icon I click has the different color). On top of that, I am curious if there is a less repetitive or messy way to execute what I have now like using "Function" or something. I would appreciate if I can get some tips on it.

Answer 1

You are missing the ); after the closing } :

 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> 

Note: You don't need to target the parent , you can just give the id to the icon.

Answer 2

Here's some other options to change an FA icon. The keyword this represents garbage . The .property or .method()/.function() references the icon.

References

.children

.querySelector()

.getElementsByTagName()

.classList

.firstElementChild

---

Demo

 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

You are missing the closing parenthesis after your event listener:

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

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