JavaScript背景颜色切换

我有一个简单的功能，就是简单地将按钮的背景颜色从浅绿色切换到红色，然后再切换回来。然而，当我调用这个函数时，它所做的只是将其更改为红色，我不知道为什么。我在这里看过其他类似的例子，我觉得我做的是正确的。我希望能得到一些帮助

<button id = "button1" onclick="myFunction()">This is a button</button>

    button {
    background-color: Aqua;
}

function myFunction() {
  if (document.getElementById("button1").style.backgroundColor === "Aqua"){
    document.getElementById("button1").style.backgroundColor = "Red";
    document.getElementById("button1").innerHTML = "I'm RED!!";
  } else { 
    document.getElementById("button1").style.backgroundColor = "Aqua";
    document.getElementById("button1").innerHTML = "I'm back BABY!!";
  }  
}

这是一个按钮
钮扣{
背景色：浅绿色；
}
函数myFunction（）{
if（document.getElementById（“button1”）.style.backgroundColor==“Aqua”）{
document.getElementById（“button1”）.style.backgroundColor=“红色”；
document.getElementById（“button1”）.innerHTML=“我是红色！！”；
}否则{
document.getElementById（“button1”）.style.backgroundColor=“Aqua”；
document.getElementById（“button1”）.innerHTML=“我回来了，宝贝！！”；
}  
}

它是这样工作的

if ($("#yourselector").css('background-color')=="rgb(220, 
20, 60)") alert("matched");

您需要将名称转换为红色、绿色、蓝色组件，您可以使用此工具

---

第一个if语句应使用小写字母aqua。。像下面这样

function myFunction() {
if (document.getElementById("button1").style.backgroundColor === "aqua") {
    document.getElementById("button1").style.backgroundColor = "red";
    document.getElementById("button1").innerHTML = "I'm RED!!";
} else {
    document.getElementById("button1").style.backgroundColor = "aqua";
    document.getElementById("button1").innerHTML = "I'm back BABY!!";
}

}

我是通过这样做才发现的 log（document.getElementById（“button1”）.style）；在日志中，您将看到一个对象，您可以在其中展开并发现css选择器是小写的， 同样要用红色来避免混淆

---

希望它有帮助，最简单的wya就是将

这个
传递到
onclick（）函数中，并使用三元运算符来确定切换状态


函数myFunction（btn）{
const isRed=btn.style.backgroundColor==“红色”；
btn.style.backgroundColor=isRed？“浅绿色”：“红色”；
btn.innerHTML=isRed？“我回来了，宝贝！！”：“我是红色！！”；
}
按钮{
背景色：浅绿色；
}
这是一个按钮
=“Aqua”
分配，即使在
条件下也是如此。相等比较运算符是
==
（或
==
）。@Ry-这不起作用至少是您的代码出了一个问题。如果您已尝试使用修复的，请更新它以显示修复的版本。@Ry-已更新。这只是保留了颜色AquaTry
console.log（document.getElementById（“button1”）.style.backgroundColor））
。它会告诉你发生了什么。这应该比你的建议容易。我在寻找最简单的解决方案这是你需要的最简单的RGB（）嘿@Misha，这看起来根本不会改变颜色all@Justin请分享你的代码，它可以更清楚！对我来说，第二次点击按钮就会改变颜色。。还要检查您的javascript文件是否正确加载到html中的脚本标记中，您可以通过向JSI为您共享一个屏幕截图来添加警报（“javascript活动”）。我只是在用codepenit那是个该死的收尾支架。我现在好了。谢谢，对不起！很高兴它确实有用！请考虑@ SyLink的一个干净代码的答案。选择正确答案，祝你好运