当提示和确认时，为什么我的盒子的颜色不变

function myFunction() {
if (confirm("Press a button!") == true) {
  if(this.style.backgroundColor == "white")
    this.style.backgroundColor = "yellow";
  else if(this.style.backgroundColor == "yellow")
    this.style.backgroundColor = "red";
  else if(this.style.backgroundColor == "red")
    this.style.backgroundColor = "" 
  else
    this.style.backgroundColor = "";
} else {
  txt = "You pressed Cancel!";
}
  if (confirm('Are you sure you want to save this thing into the database?') == true) {
    // Save it!
  } else {
    // Do nothing!
  }
}
var blocks = document.getElementsByClassName("foo");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", myFunction);
}

.foo {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}
.white{
  background: #FFFFFF;
}
.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

<div class="whole">
  <div id="centerbox1" class="foo white">A1</div>
  <div id="centerbox2" class="foo white">A2</div>
  <div id="centerbox3" class="foo white">A3</div><br><br>
  <div id="centerbox4" class="foo white">B1</div>
  <div id="centerbox5" class="foo white">B2</div>
  <div id="centerbox6" class="foo white">B3</div>
</div>

由于某种原因，我的提示和条件不会将我的盒子变成黄色，然后将其变成红色，然后再为原始颜色。有人知道为什么吗？我希望它会更改颜色，用户按"是"提示。

示例：我单击了正方形，它提示我是或否，颜色变黄。单击黄色的广场会提示我另一个是或否。将其转回原始颜色。这个问题是Div OnClick提示是是或否，如果是，则DIV更改为不同的颜色

这对我有用。

说明：

我注意到JavaScript无法从.white类读取element.style，但是当我将在线CSS插入每个元素时，可以这样做。这将在以下JSFIDDLE中解释。
您在功能中使用了this范围，而实际上没有提供this实际是什么。因此，我在click事件处理程序中传递了this参数，并且由于this不能用作函数参数，因此将其更改为e。

function myFunction(e) {
  if (confirm("Press a button!") == true) {
    if (e.style.backgroundColor == "white")
      e.style.backgroundColor = "yellow";
    else if (e.style.backgroundColor == "yellow")
      e.style.backgroundColor = "red";
    else if (e.style.backgroundColor == "red")
      e.style.backgroundColor = "white"
    else
      e.style.backgroundColor = "white";
  } else {
    txt = "You pressed Cancel!";
  }
  if (confirm('Are you sure you want to save this thing into the database?') == true) {
    // Save it!
  } else {
    // Do nothing!
  }
}
var blocks = document.getElementsByClassName("foo");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", function() {
    myFunction(this);
  });
}

.foo {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}
.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

<div class="whole">
  <div id="centerbox1" class="foo" style="background:white;">A1</div>
  <div id="centerbox2" class="foo" style="background:white;">A2</div>
  <div id="centerbox3" class="foo" style="background:white;">A3</div><br><br>
  <div id="centerbox4" class="foo" style="background:white;">B1</div>
  <div id="centerbox5" class="foo" style="background:white;">B2</div>
  <div id="centerbox6" class="foo" style="background:white;">B3</div>
</div>

function myFunction(e) {
  if (confirm("Press a button!") == true) {
    if (e.style.backgroundColor == "white")
      e.style.backgroundColor = "yellow";
    else if (e.style.backgroundColor == "yellow")
      e.style.backgroundColor = "red";
    else if (e.style.backgroundColor == "red")
      e.style.backgroundColor = ""
    else
      e.style.backgroundColor = "";
  } else {
    txt = "You pressed Cancel!";
  }
  if (confirm('Are you sure you want to save this thing into the database?') == true) {
    // Save it!
  } else {
    // Do nothing!
  }
}
var blocks = document.getElementsByClassName("foo");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", function() {
    myFunction(this);
  });
}

.foo {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}
.white {
  background-color: white;
}
.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.purple {
  background: #ab3fdd;
}
.wine {
  background: #ae163e;
}

<div class="whole">
  <div id="centerbox1" class="foo" style="background:white;">A1</div>
  <div id="centerbox2" class="foo" style="background:white;">A2</div>
  <div id="centerbox3" class="foo" style="background:white;">A3</div><br><br>
  <div id="centerbox4" class="foo" style="background:white;">B1</div>
  <div id="centerbox5" class="foo" style="background:white;">B2</div>
  <div id="centerbox6" class="foo" style="background:white;">B3</div>
</div>

这是我寻求的答案！

     <!doctype html>
<html>
<head>
<script language ="javascript">
function myFunction(e) {
  if (confirm("Press a button!") == true) {
    if (e.style.backgroundColor == "white")
      e.style.backgroundColor = "yellow";
    else if (e.style.backgroundColor == "yellow")
      e.style.backgroundColor = "red";
    else if (e.style.backgroundColor == "red")
      e.style.backgroundColor = ""
    else
      e.style.backgroundColor = "";
  } else {
    txt = "You pressed Cancel!";
  }
  if (confirm('Are you sure you want to save this thing into the database?') == true) {
    // Save it!
  } else {
    // Do nothing!
  }
}
var blocks = document.getElementsByClassName("foo");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", function() {
    myFunction(this);
  });
}
</script>
<style type="text/css">
.foo {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}
.white {
  background-color: white;
}
.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.purple {
  background: #ab3fdd;
}
.wine {
  background: #ae163e;
}
</style>
</head>
<body>
<div class="whole">
  <div id="centerbox1" class="foo" style="background:white;">A1</div>
  <div id="centerbox2" class="foo" style="background:white;">A2</div>
  <div id="centerbox3" class="foo" style="background:white;">A3</div><br><br>
  <div id="centerbox4" class="foo" style="background:white;">B1</div>
  <div id="centerbox5" class="foo" style="background:white;">B2</div>
  <div id="centerbox6" class="foo" style="background:white;">B3</div>
</div>
</body>
</html>

这是我的HTML代码，即使我复制并粘贴了代码片段

相关内容

最新更新

热门标签：