Trying to get working javascript dialog box using promise and passing parameters

Question

I have read/tried the 'Use promises' section at: How do I return the response from an asynchronous call? but that example does not include a parameter (but it appears to be passing okay in the below code) nor does it work when I added similar code (shown below). Nothing else I've come cross has gotten me this close to the code working. Essentially 'callingFunction' is called during onLoad and needs to pass a parameter to myDialog and wait for user response before continuing to the alerts(in this simplified example). The way it is now shows me the 'start' and 'end' alerts and then I get to see the dialog. When I click on either button (for the first time only), I am shown the 'oops'. So the code is currently not waiting for the promise delivery or acknowledging the resolve value correctly. How can this be fixed?

function myDialog(question) {
 return new Promise(function(resolve, reject) {

    var box = document.createElement('div');  
    box.style.position = "absolute";
    box.style.top = "300px";
    box.style.left = "300px";
    box.style.width = "200px";
    box.style.height = "100px";

    var text = document.createTextNode(question);
    text.margin = "20px";
    box.appendChild(text);

    var button_yes = document.createElement("button");
    button_yes.innerHTML = "Yes";
    button_yes.onclick = function() { resolve(true); }
    box.appendChild(button_yes);

    var button_no = document.createElement("button");
    button_no.innerHTML = "No";
    button_no.onclick = function() { resolve(false); }
    box.appendChild(button_no);

    window.parent.document.body.appendChild(box);
 })
}

function callingFunction(question) {
   alert('start');
   myDialog(question).then(function(v) {
     window.parent.document.body.removeChild(box); 
     if (v == true) {
            alert('true selected');
       }else{
            alert('false selected');
       }
   }).catch(function(v) {
       alert('oops');
   });
   alert('end');
}

Answer 1

So the code is currently not waiting for the promise delivery or acknowledging the resolve value correctly.

Actually, it is. Try alerting/logging the v value to see what the culprit is. You'll get an error message saying that box is not defined in the line

window.parent.document.body.removeChild(box);

which is totally accurate - your box variable is scoped to the promise callback in myDialog. You can use

function myDialog(question) {
  return new Promise(function(resolve, reject) {
    var container = window.parent.document.body
    var box = document.createElement('div');  
    box.style.position = "absolute";
    box.style.top = "300px";
    box.style.left = "300px";
    box.style.width = "200px";
    box.style.height = "100px";

    var text = document.createTextNode(question);
    text.margin = "20px";
    box.appendChild(text);

    var button_yes = document.createElement("button");
    button_yes.textContent = "Yes";
    button_yes.onclick = function() {
      resolve(true);
      container.removeChild(box);
    };
    box.appendChild(button_yes);

    var button_no = document.createElement("button");
    button_no.textContent = "No";
    button_no.onclick = function() {
      resolve(false);
      container.removeChild(box);
    };
    box.appendChild(button_no);

    container.appendChild(box);
  });
}

function callingFunction(question) {
  alert('start');
  myDialog(question).then(function(v) {
    alert(v+' selected');
  }).catch(function(e) {
    alert('something went wrong: '+e);
  });
}