javascript - 单击时切换按钮背景颜色

Question

我有这个功能，旨在每次单击按钮时在按钮的两种预定义颜色之间切换背景:

const showAvailButtonClicked = (targetButton, clickedColor, unClickedColor) => {
  let clickedElement = document.getElementById(targetButton)
  let currColor = clickedElement.style.backgroundColor
  if (currColor == clickedColor) {
    clickedElement.style.backgroundColor = unClickedColor
  } else {
    alert("Current color:" + currColor)
    clickedElement.style.backgroundColor = clickedColor
  }
}

let targetButton = document.getElementById("testbutton")
targetButton.addEventListener("click", () => {
  showAvailButtonClicked("testbutton","#ba0202", "#0f2e0c")
})

#testbutton {
  background-color: #0f2e0c;
}

<button id="testbutton">Toggle</button>

我在上面这段简单的代码中遇到了两个问题:

1 - 按钮以这种颜色 unClickedColor = #0f2e0c 开始。但是，在第一次单击时，警报不会注册任何颜色。 IE。警报消息仅显示 Current color:。

2 - 在第 2 次和后续点击时，此行 let currColor = clickedElement.style.backgroundColor 的注册颜色给出 RGB 格式 rgb(r, g, b)。我如何强制它变成十六进制格式以便我可以进行颜色比较？谢谢。

Answer 1

更好的做法是将一个类附加到单击按钮上并在该类上设置样式。

以下代码段为按钮设置了基本背景颜色，然后在单击它时 - 切换“已单击”类 - 在应用时 - 提供备用背景颜色。

这实现起来更简单，因为您不必确定现有的背景颜色，然后再进行一些时髦的十六进制比较，而且最好将 html、js 和 css 分开到它们自己的领域中。

let testButton = document.getElementById("testbutton");

testButton.addEventListener("click", () => {
  testButton.classList.toggle('clicked');
})

#testbutton {
  background-color: #0f2e0c;
  color: white
}

#testbutton.clicked {
  background-color: #ba0202;
}

<button id="testbutton">Toggle</button>