如何修改点击事件实现按钮文本切换同时修改背景颜色

你当前的实现仅修改了按钮的value文本属性，没有关联任何样式变更逻辑，因此点击时只会切换按钮文字，不会改变颜色。可以按照以下步骤调整逻辑，实现状态和颜色的同步切换。

拆分CSS状态样式 #

不要把固定颜色直接写死在ID选择器里，把两种交互状态的样式独立拆分，基础样式保持通用：

/* 按钮通用基础样式 */
#seen {
  border: none;
  border-radius: 4px;
  color: white;
  padding: 2px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
}
/* 未确认告警状态：默认蓝色 */
#seen.state-unack {
  background-color: #1da4f1;
}
/* 已确认告警状态：换高辨识度的绿色 */
#seen.state-ack {
  background-color: #2ecc71;
}

修改点击事件逻辑同步更新状态 #

在原有判断文本的逻辑基础上，同步给按钮追加对应状态的样式类即可，不用手动在JS里拼颜色值：

document.getElementById("seen").addEventListener(
  "click",
  function(event) {
    const btn = event.target;
    if (btn.value === "unacknowledged") {
      // 切换为已确认状态
      btn.value = "acknowledge";
      btn.classList.remove("state-unack");
      btn.classList.add("state-ack");
    } else {
      // 切换回未确认状态
      btn.value = "unacknowledged";
      btn.classList.remove("state-ack");
      btn.classList.add("state-unack");
    }
  },
  false
);

用类名关联状态的方式比直接在JS里修改style属性的可维护性更高，有几个明显优势：

• 状态变更逻辑和样式完全解耦，后续要改配色、加过渡动画的时候不需要碰JS代码
• 类名和状态一一对应，排查问题的时候一眼就能看到按钮当前的状态
• 不会出现样式覆盖优先级冲突的问题

补全HTML初始状态匹配 #

因为已经把初始颜色从ID选择器挪到了状态类上，需要给按钮加上默认的未确认类，避免页面初始加载时按钮没有背景色：

<input type="button" id="seen" class="state-unack" value="unacknowledged">

适配内联onclick绑定的写法 #

如果你习惯用HTML内联onclick属性绑定事件，也可以在同一个回调函数里直接修改样式属性，逻辑和上面保持一致：

<input 
  type="button" 
  id="seen" 
  value="unacknowledged"
  onclick="toggleAckStatus(this)"
>
<script>
function toggleAckStatus(btn) {
  if (btn.value === "unacknowledged") {
    btn.value = "acknowledge";
    btn.style.backgroundColor = "#2ecc71";
  } else {
    btn.value = "unacknowledged";
    btn.style.backgroundColor = "#1da4f1";
  }
}
</script>

内容的提问来源于stack exchange，提问作者Aaron T