如何从自定义确认框中获取 return 值
How to get a return value from a custom confirmation box
我正在尝试根据用户单击的按钮从自定义确认框中获取 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>
你快到了。
问题是 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 值。不确定如何异步处理它。
用于确认的模板 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>
你快到了。
问题是 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>