Question

所以我有一个非常简单的代码，当我运行它时没有给出任何错误，但是问题是，它没有执行应有的功能...

当我单击中间的div时，它应该会更改颜色...

我想念什么？似乎找不到任何错字...

var panel = document.getElementById('color_panel');
document.getElementById('color_panel').addEventListener("click", function() {
  var mySwitch = document.getElementById('color_panel').style.background;
  if (mySwitch == "#76FF03") {
    document.getElementById('color_panel').style.background = "#039BE5";
  } else {
    document.getElementById('color_panel').style.background = "#76FF03";
  }
});

<body style="background: #37474F; margin: 0;">
  <div id="color_panel" style="background: #76FF03; margin:
    auto; font-family: Century Gothic; font-size: 40px; color: #37474F;
    width: 200px; height: 200px; padding: 20px; margin-top: 50%;
    transform: translateY(-50%); text-align: center;">
    Click me!<br>or Double Click?</div>
  <button style="font-size: 10px;
    width: 100px; height: 20px; margin-left: 50%;
    transform: translateX(-50%); border: solid 2px;
    border-color: #FBC02D; border-radius: 5px;
    background: #E3F2FD;" id="button" onclick="transition()">
    add transition!</button>

Answer 1

您需要进行一些基本的调试。添加一个console.log语句以检查要放入if语句中的值，并查看其实际值。

浏览器正在对其进行规范化，因此mySwitch == "#76FF03"永远不是正确的。

var panel = document.getElementById('color_panel');
document.getElementById('color_panel').addEventListener("click", function() {
  var mySwitch = document.getElementById('color_panel').style.background;
  console.log(mySwitch);
  if (mySwitch == "#76FF03") {
    document.getElementById('color_panel').style.background = "#039BE5";
  } else {
    document.getElementById('color_panel').style.background = "#76FF03";
  }
});

<body style="background: #37474F; margin: 0;">
  <div id="color_panel" style="background: #76FF03; margin:
    auto; font-family: Century Gothic; font-size: 40px; color: #37474F;
    width: 200px; height: 200px; padding: 20px; margin-top: 50%;
    transform: translateY(-50%); text-align: center;">
    Click me!<br>or Double Click?</div>
  <button style="font-size: 10px;
    width: 100px; height: 20px; margin-left: 50%;
    transform: translateX(-50%); border: solid 2px;
    border-color: #FBC02D; border-radius: 5px;
    background: #E3F2FD;" id="button" onclick="transition()">
    add transition!</button>

通常可以通过将所有样式放在单独的样式表中，然后调整元素所属的类来更好地解决此类问题。

var panel = document.getElementById('color_panel');

panel.addEventListener("click", function() {
  panel.classList.toggle("other");
});

body {
  background: #37474F;
  margin: 0;
}

#color_panel {
  background: #76FF03;
  margin: auto;
  font-family: Century Gothic;
  font-size: 40px;
  color: #37474F;
  width: 200px;
  height: 200px;
  padding: 20px;
  margin-top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

#color_panel.other {
  background: #039BE5;
}

#button {
  font-size: 10px;
  width: 100px;
  height: 20px;
  margin-left: 50%;
  transform: translateX(-50%);
  border: solid 2px;
  border-color: #FBC02D;
  border-radius: 5px;
  background: #E3F2FD;
}

<div id="color_panel">
  Click me!<br>or Double Click?
</div>

<button style="" id="button" onclick="transition()">
    add transition!
</button>

Answer 2

您的代码似乎正确，您在变量rgb(118, 255, 3)中获得了mySwitch，因此在条件不存在的情况下

您的代码应为

<script type="text/javascript">
    var panel = document.getElementById('color_panel');
    document.getElementById('color_panel').addEventListener("click", function() {
      var mySwitch = document.getElementById('color_panel').style.background;alert(mySwitch);
      if (mySwitch == "rgb(118, 255, 3)") {
        document.getElementById('color_panel').style.background = "#039BE5";
      } else {
        document.getElementById('color_panel').style.background = "#76FF03";
      }
    });
</script>

Answer 3

mySwitch将以rgb给出颜色，您无法与stuntg进行比较。删除内联样式，并添加使用类。然后使用toggle在每次点击时切换班级

var panel = document.getElementById('color_panel');
document.getElementById('color_panel').addEventListener("click", function() {
  panel.classList.toggle('changeColor')
});

.divStyle {
  background: #76FF03;
  margin: auto;
  font-family: Century Gothic;
  font-size: 40px;
  color: #37474F;
  width: 200px;
  height: 200px;
  padding: 20px;
  margin-top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.changeColor {
  background: #039BE5
}

<body style="background: #37474F; margin: 0;">
  <div id="color_panel" class='divStyle'>
    Click me!<br>or Double Click?</div>
  <button style="font-size: 10px;
    width: 100px; height: 20px; margin-left: 50%;
    transform: translateX(-50%); border: solid 2px;
    border-color: #FBC02D; border-radius: 5px;
    background: #E3F2FD;" id="button" onclick="transition()">
    add transition!</button>
</body>

Answer 4

代码的唯一问题是，您以HTML #76FF03的HEX格式定义了颜色，而JavaScript则以RGB格式返回了颜色，如果您的if条件不起作用，则返回{{ 1}}条件是您再次应用了相同的背景色，因此您认为您的代码不起作用。

您只需要在JavaScript中将颜色与RGB格式匹配即可。 else与rgb(118, 255, 3)的颜色相同，但格式不同。

您可以尝试以下方法：

#76FF03

var panel = document.getElementById('color_panel');
panel.addEventListener("click", function(e) {
    var mySwitch = e.target.style.background;
    if (mySwitch == "rgb(118, 255, 3)") {
        e.target.style.background = "#039BE5";
    } else {
        e.target.style.background = "#76FF03";
    }
});

为避免格式问题，您可以使用颜色名称定义颜色，然后HTML和JavaScript都返回相同的结果。

顺便说一句，您只需要一次又一次使用<body style="background: #37474F; margin: 0;"> <div id="color_panel" style="background: #76FF03; margin: auto; font-family: Century Gothic; font-size: 40px; color: #37474F; width: 200px; height: 200px; padding: 20px; margin-top: 50%; transform: translateY(-50%); text-align: center;"> Click me!<br>or Double Click?</div> <button style="font-size: 10px; width: 100px; height: 20px; margin-left: 50%; transform: translateX(-50%); border: solid 2px; border-color: #FBC02D; border-radius: 5px; background: #E3F2FD;" id="button" onclick="transition()"> add transition!</button> </body>。由于您已经在var中分配了元素，因此只需将该变量用于document.getElementById('color_panel')，并在addEventListener函数中，您可以使用事件变量addEventListener或e来命名用于此。

如果您愿意，这是可选的事情。

Answer 5

您问题的正确答案是...

单击框中的

您的代码起作用。您的代码是正确的，并且没有任何错字。

单击该框时，背景色会更改。 只是将背景颜色更改为已经存在的颜色：

在您的html文件的第一格中：

style="background: #76FF03;

在脚本中的else语句中：

document.getElementById('color_panel').style.background = "#76FF03";

为什么单击时我的颜色没有改变？

5 个答案: