javascript - 带有背景颜色的 If 语句

Question

您好，我只是想看看这些 if 语句哪里出错了，我看不出它们有什么问题，但它们似乎没有按预期工作，当单击 html 按钮时会切换颜色，我已经确定当单击按钮时，正在作为控制台显示“按钮已单击”。

 function colorSwitch()
 {
 var thediv = document.getElementsByClassName("light");

 console.log("Button Clicked");

if(thediv[0].style.backgroundColor == "#ff0000")
{
 thediv[0].style.backgroundColor = "#ffff00";
}
if(thediv[0].style.backgroundColor == "#ffff00")
{
 thediv[0].style.backgroundColor = "#00ff00";
}
if(thediv[0].style.backgroundColor == "#00ff00")
{
 thediv[0].style.backgroundColor = "#ff0000";
}

};

Answer 1

你需要添加关键字else，否则每个条件都满足，让你原地踏步。

function colorSwitch () {
  var thediv = document.getElementsByClassName("light");

  console.log("Button Clicked");

  if (thediv[0].style.backgroundColor == "#ff0000") {
    thediv[0].style.backgroundColor = "#ffff00";
  }
  else if (thediv[0].style.backgroundColor == "#ffff00") {
    thediv[0].style.backgroundColor = "#00ff00";
  }
  else if (thediv[0].style.backgroundColor == "#00ff00") {
    thediv[0].style.backgroundColor = "#ff0000";
  }
};