点击Font Awesome垃圾桶图标无法修改颜色，求解决方法

嘿，我看到你遇到的问题了，咱们一步步来搞定它：

首先，你的JavaScript代码存在语法错误——addEventListener的回调函数和方法本身都没闭合括号，这会直接导致代码无法正常执行。其次，你当前修改的是外层<div id="garbage">的颜色，虽然理论上内部图标会继承颜色，但直接修改<i>标签的样式会更可靠，避免可能的样式冲突。

下面是修正后的完整代码：

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

<script>
// 方案1：直接选中图标元素修改样式
const trashIcon = document.querySelector(".fas.fa-trash");
trashIcon.addEventListener("click", function() {
    trashIcon.style.color = "#66c144";
});

// 方案2：点击外层div时修改内部图标（适合需要点击整个区域生效的场景）
// const garbageDiv = document.getElementById("garbage");
// garbageDiv.addEventListener("click", function() {
//     this.querySelector(".fas.fa-trash").style.color = "#66c144";
// });
</script>

关键修改点拆解：

• 修复了JavaScript语法错误，补上了缺失的});，确保代码能正常运行
• 直接选中<i>标签进行样式修改，避免继承关系带来的不确定性
• 额外提供了外层div触发的备选方案，适配不同交互需求

另外，如果你之前尝试获取trash元素仍失败，大概率是脚本执行时机不对——要确保JS代码在DOM加载完成后再运行，要么把脚本放在HTML内容末尾（</body>标签前），要么用DOMContentLoaded事件包裹代码：

document.addEventListener("DOMContentLoaded", function() {
    const trashIcon = document.querySelector(".fas.fa-trash");
    trashIcon.addEventListener("click", function() {
        trashIcon.style.color = "#66c144";
    });
});

这样调整后，点击图标就能正常切换颜色啦！

内容的提问来源于stack exchange，提问作者Jun Jung