Javascript 使用Js更改文本的背景颜色

我正在创建带有锚定标记的竖起大拇指按钮，当用户单击它时，它的背景和字体颜色会改变，但问题是它正在改变背景颜色，而不是字体颜色：

函数changeColor（）{
document.getElementById（'icon'）.style.color=“#fff”//forecolor
document.getElementById（'icon'）.style.background=“#008000”；//backcolor
}

。竖起大拇指{
边框：5px纯绿色；
宽度：42%；
填充：30px 6px 34px 32px；
边界半径：100%；
}

您有两次

id=“icon”

，这在HTML中是一种犯罪，这就是它不起作用的原因。将其更改为

class

或为

id

指定不同的值

<div id="icon" class="thumb-up">
  <i id="icon" class="fas fa-thumbs-up fa-5x"></i>
  <!--^^^^^^^^ -->
</div>

。竖起大拇指{
边框：5px纯绿色；
宽度：42%；
填充：30px 6px 34px 32px；
边界半径：100%；
}

---

不要使用相同的

id

名称。Id名称应该是唯一的

您的代码在这里可以很好地进行更改

函数changeColor（）{
document.getElementById（'icons'）.style.color=“#fff”//forecolor
document.getElementById（'icon'）.style.background=“#008000”；//backcolor
}

。竖起大拇指{
边框：5px纯绿色；
宽度：42%；
填充：30px 6px 34px 32px；
边界半径：100%；
文本对齐：居中；
}

---

您更改了图标？我更改了图标的id名称！我的意思是：

✓<代码>：）

我没有在这里导入字体很棒的css，所以我使用了unicode@维拉：好的<代码>：）注释不用于扩展讨论；这段对话已经结束。