div onclick提示是或否，如果是，div改为不同的颜色

Question

我正在一个接收用户数据的网站上工作，无论他是否确实要帮助患者。

我真的不知道如何开始这个并且我已经使用了几个星期的简单功能。

示例：我点击了方块，它提示我是或否，颜色变为黄色。 点击黄色的方块，会提示我另一个是或否。把它变回原来的颜色。

＆＃13;

＆＃13;

sizeof(void*)

＆＃13;

function myFunction() {
   if (confirm("Press a button!") == true) {
       document.getElementByClass("stileone").style.backgroundColor = "lightblue";
   } 
   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!
}

＆＃13;

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

.blue {
  background: #13b4ff;
}

.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  
}
.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是针对您的问题的纯Javascript解决方案。

function myFunction() {
if (confirm("Press a button!") == true) {
  if(this.style.backgroundColor == "yellow")
    this.style.backgroundColor = "";
  else
    this.style.backgroundColor = "yellow";
} 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%;
}

.blue {
  background: #13b4ff;
}

.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 blue">A1</div>
  <div id="centerbox2" class="foo purple">A2</div>
  <div id="centerbox3" class="foo wine">A3</div><br><br>

  <div id="centerbox4" class="foo blue">B1</div>
  <div id="centerbox5" class="foo purple">B2</div>
  <div id="centerbox6" class="foo wine">B3</div>
</div>

Answer 2

我不太确定您要实现的目标，并且您在代码中犯了很多错误，因为开始没有使用事件来调用您的函数。有了这个，这里可以帮助你开始：

点击您的第一个框，查看点击Yes或Cancel时的行为方式。

＆＃13;

＆＃13;

$('#centerbox1').on('click', function() {
  $(this).css('background', '#13b4ff');
  if (confirm('Do you want to do this ?')) { 
      $(this).css('background', 'yellow');
  }
})

＆＃13;

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

.blue {
  background: #13b4ff;
}

.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  
}
.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class = "whole">

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

    </div>

＆＃13;

＆＃13;

＆＃13;