Div Onclick Prompts Yes Or No, If Yes, Div Change To Different Color

i am working on a website that receives the user data whether if he is indeed going to help a patient. i really dont know how to start this and im been on 1 simple function for wee

Solution 1:

Here is a pure Javascript solution for your problem.

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>

Solution 2:

I'm not quite sure what you are trying to achieve and you are making many mistakes in your code, for start not using events to call your function. With that said here is something that might help you get started:

Click on your first box and see how it behaves whether you click Yes or Cancel.

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

.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;
}

<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>