如何通過單擊圖標來更改超棒字體的顏色

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賦予圖標即可。

Answer 2

這是更改FA圖標的其他一些選項。 關鍵字this表示garbage 。 .property或.method()/.function()引用圖標。

參考

。孩子

.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";
});