why doesnt this prompt me a yes no at all? : <!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->
how come it doesnt work? 
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 weeks.

Example: i clicked square, it prompts me yes or no, the color turns yellow. clicking on the square, which is yellow, will prompt me another yes or no. turning it back to the original color.
this question is a follow up of https://stackoverflow.com/questions/47769965/div-onclick-prompts-yes-or-no-if-yes-div-change-to-different-color/47770269#47770269
