如何实现按钮点击后变色，再次点击时恢复为初始颜色？

你现有代码的问题是，每次点击都会强制把按钮背景设为绿色，没有对按钮当前的状态做判断，所以无法实现再次点击恢复透明的效果。

推荐实现方式（类名切换方案） #

用CSS类控制不同状态的样式，JS只负责切换类名，维护成本更低：

1. 先定义两种状态对应的样式

#upVote {
  background-color: transparent;
}
#upVote.active {
  background-color: green;
  color: black;
}

2. 修改点击事件逻辑，用classList.toggle实现类名自动切换

function vote(){
  const upVoteBtn = document.getElementById("upVote");
  upVoteBtn.classList.toggle("active");
}

3. HTML部分保持原有结构即可，注意给onclick的属性值加上引号：

<button id="upVote" onclick="vote()">upVote</button>

classList.toggle会自动检测元素是否带有指定类名：类名存在时就移除，不存在时就添加，刚好匹配点击切换的交互逻辑。

简易实现（直接修改内联样式） #

如果不想额外写CSS，也可以直接在JS里判断当前背景色，做状态切换：

function vote(){
  const upVoteBtn = document.getElementById("upVote");
  if (upVoteBtn.style.backgroundColor === 'green') {
    upVoteBtn.style.backgroundColor = 'transparent';
    upVoteBtn.style.color = '';
  } else {
    upVoteBtn.style.backgroundColor = 'green';
    upVoteBtn.style.color = 'black';
  }
}

注意：这种直接读取内联样式的方式有局限性——如果按钮初始样式是写在CSS中而非行内style属性，style.backgroundColor无法读取到实际渲染的样式值，会导致判断失效，优先选择类名切换的方案。

内容的提问来源于stack exchange，提问作者IU Kottahchchi