如何从自定义确认框中获取 return 值

Question

我正在尝试根据用户单击的按钮从自定义确认框中获取 return 值。不确定如何异步处理它。

用于确认的模板 window 是预制的，并且 confirmation_box() 将文本分配给指定的元素。

如果用户单击“是”，我想 return 值为 1/true，这将允许我继续下一步。如果单击否，确认 window 将简单地关闭并且代码停止在那里。

async function confirmation_box(msg = 'Are you sure?', false_btn = 'No', true_btn = 'Yes') {

  let confirmation_modal = document.getElementById('overlay');
  let true_el = confirmation_modal.querySelector('.true_btn');
  let false_el = confirmation_modal.querySelector('.false_btn');

  // assign text to elements
  confirmation_modal.querySelector('#confirmation_msg').textContent = msg;
  true_el.textContent = true_btn;
  false_el.textContent = false_btn;

  confirmation_modal.classList.add('show');

  true_el.addEventListener('click', await
    function() {
      confirmation_modal.classList.remove('show');
      return 1;
    });

  false_el.addEventListener('click', await
    function() {
      confirmation_modal.classList.remove('show');
      return 0;
    });
}


async function delete_demo() {
  let result = await confirmation_box('are you sure you want to delete this?');
  console.log(`Confirmation result ${result}`);

  if (result) {
    document.getElementById('demo_text').remove();
  }


}

body {
  height: 100vh;
  display: -ms-grid;
  display: grid;
  place-content: center;
}

#overlay {
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  display: -ms-grid;
  display: grid;
  position: fixed;
  visibility: hidden;
  place-content: center;
  background: rgba(0, 0, 0, 0.5);
}

#overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  padding: 10px;
  background: #fff;
  border: 1px solid #000;
}

<body>
  <div class="container">

    <p id='demo_text'>Demo text</p>

    <button onclick='delete_demo()'>Delete Demo</button>


    <div id="overlay">
      <div class="modal">
        <p id="confirmation_msg"></p>

        <div>
          <button class="false_btn"></button>
          <button class="true_btn"></button>
        </div>
      </div>
    </div>
  </div>

</body>

Answer 1

你快到了。

问题是 confirmation_box 函数没有 return Promise，所以你的 await confirmation_box 语句没有像你期望的那样等待做。固定代码有3个变化。

confirmation_box return是一个 Promise，其中包含承诺中的所有代码。
return 0 和 return 1 已更改为 resolve(0) 和 resolve(1)
正如 Barmar 所说，当您不需要多个事件侦听器时，不要在任何可能循环的内容中使用 addEventListener。我只是将它更改为 onclick，因为它使用 Promise 区域中可用的 resolve 函数。

固定代码如下：

async function confirmation_box(msg = 'Are you sure?', false_btn = 'No', true_btn = 'Yes') {
    return new Promise(function(resolve){
      let confirmation_modal = document.getElementById('overlay');
      let true_el = confirmation_modal.querySelector('.true_btn');
      let false_el = confirmation_modal.querySelector('.false_btn');

      // assign text to elements
      confirmation_modal.querySelector('#confirmation_msg').textContent = msg;
      true_el.textContent = true_btn;
      false_el.textContent = false_btn;

      confirmation_modal.classList.add('show');

      true_el.onclick = function() {
          confirmation_modal.classList.remove('show');
          resolve(1);
        };

      false_el.onclick = function() {
          confirmation_modal.classList.remove('show');
          resolve(0);
        };
    });
}


async function delete_demo() {
  let result = await confirmation_box('are you sure you want to delete this?');
  console.log(`Confirmation result ${result}`);

  if (result) {
    document.getElementById('demo_text').remove();
  }


}

body {
  height: 100vh;
  display: -ms-grid;
  display: grid;
  place-content: center;
}

#overlay {
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  display: -ms-grid;
  display: grid;
  position: fixed;
  visibility: hidden;
  place-content: center;
  background: rgba(0, 0, 0, 0.5);
}

#overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  padding: 10px;
  background: #fff;
  border: 1px solid #000;
}

<body>
  <div class="container">

    <p id='demo_text'>Demo text</p>

    <button onclick='delete_demo()'>Delete Demo</button>


    <div id="overlay">
      <div class="modal">
        <p id="confirmation_msg"></p>

        <div>
          <button class="false_btn"></button>
          <button class="true_btn"></button>
        </div>
      </div>
    </div>
  </div>
</body>

如何从自定义确认框中获取 return 值

How to get a return value from a custom confirmation box

javascript

confirm

asynchronous

confirmation

async-await