This is one of the issues regards promptsregarding prompt, alert, and confirm messages, they block javascript execution since the browser waits for user interaction, also they are considered bad UX implementation:
This is one of the issues regards prompts, alert, and confirm messages, they block javascript execution since the browser waits for user interaction, also they are considered bad UX implementation:
This is one of the issues regarding prompt, alert, and confirm messages, they block javascript execution since the browser waits for user interaction, also are considered bad UX implementation:
function promptPromise(message) {
var dialog = document.getElementById('dialog');
var input = dialog.querySelector('input');
var okButton = dialog.querySelector('button.ok');
dialog.querySelector('.message').innerHTML = String(message);
dialog.className = '';
return new Promise(function(resolve, reject) {
dialog.addEventListener('click', function handleButtonClicks(e) {
if (e.target.tagName !== 'BUTTON') { return; }
dialog.removeEventListener('click', handleButtonClicks);
dialog.className = 'hidden';
if (e.target === okButton) {
resolve(input.value);
} else {
reject(new Error('User cancelled'));
}
});
});
}
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('action');
var output = document.getElementById('prompt');
button.addEventListener('click', function() {
promptPromise('What is your name?').then(function(name) {
output.innerHTML = '' + name;
})
.catch(function() {
output.innerHTML = ' ̄\\_(ツ)_/ ̄';
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Async Dislogs Example</title>
<script src="//cdn.jsdelivr.net/bluebird/3.0.5/bluebird.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var time = document.getElementById('time-stamp');
clockTick();
setInterval(clockTick, 1000);
function clockTick() {
time.innerHTML = '' + new Date();
}
});
</script>
<style type="text/css">
#dialog {
width: 200px;
margin: auto;
border: thin solid black;
padding: 10px;
background: lightgreen;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<p>The current time is <span id="time-stamp"></span>.</p>
<p>Your name is <span id="prompt"></span>.</p>
<button id="action">Set Name</button>
<div id="dialog" class="hidden">
<div class="message">foobar</div>
<input type="text">
<div>
<button class="ok">Ok</button>
<button class="cancel">Cancel</button>
</div>
</div>
</body>
</html>For your code snippet the implementation would be something like this:
function promptPromise(message) {
var dialog = document.getElementById('dialog');
var input = dialog.querySelector('input');
var okButton = dialog.querySelector('button.ok');
dialog.querySelector('.message').innerHTML = String(message);
dialog.className = '';
return new Promise(function(resolve, reject) {
dialog.addEventListener('click', function handleButtonClicks(e) {
if (e.target.tagName !== 'BUTTON') { return; }
dialog.removeEventListener('click', handleButtonClicks);
dialog.className = 'hidden';
if (e.target === okButton) {
resolve(input.value);
} else {
reject(new Error('User cancelled'));
}
});
});
}
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('action');
var output = document.getElementById('prompt''hint');
var el = document.getElementById('hint');
button.addEventListener('click', function() {
promptPromise('Whatel.innerHTML is= your'Please, name?'reply to prompt';
promptPromise('Hello world').then(function(name) {
outputdocument.getElementById('prompt-call-output').innerHTML = '' + name;
})
.catch(function() {
output.innerHTML = ' ̄\\_(ツ)_/ ̄';
});
});
});#dialog {
width: 200px;
margin: auto;
border: thin solid black;
padding: 10px;
background: lightgreen;
}
.hidden {
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><html>
<title>Async Dislogs Example</title><head>
<script src="//cdn.jsdelivr.net/bluebird/3.0.5/bluebird.js"></script>
<script type="text</javascript">
document.addEventListener('DOMContentLoaded', function() {head>
var time = document.getElementById('time-stamp');<body>
clockTick();
setInterval(clockTick, 1000);
<button functionid="action">Call clockTick()native {app</button>
time.innerHTML = '' + new Date();
<p }id="hint"></p>
});
</script>
<style<p type="textid="prompt-call-output"></css">p>
#dialog {
width: 200px;
<div margin:id="dialog" auto;class="hidden">
border: thin solid black;
padding:<div 10px;class="message">foobar</div>
background: lightgreen;
}
.hidden<input {type="text">
display: none;
}<div>
</style>
</head>
<body>
<p>The current time is <span id="time-stamp"></span>.</p>
<p>Your name is <span id="prompt"></span>.</p>
<button id="action">Set Name<class="ok">Ok</button>
<div id="dialog" class="hidden">
<div class="message">foobar</div>
<input<button type="text">class="cancel">Cancel</button>
<div>
<button class="ok">Ok<</button>div>
<button class="cancel">Cancel</button>
</div>
</div>
</body>
</html>function promptPromise(message) {
var dialog = document.getElementById('dialog');
var input = dialog.querySelector('input');
var okButton = dialog.querySelector('button.ok');
dialog.querySelector('.message').innerHTML = String(message);
dialog.className = '';
return new Promise(function(resolve, reject) {
dialog.addEventListener('click', function handleButtonClicks(e) {
if (e.target.tagName !== 'BUTTON') { return; }
dialog.removeEventListener('click', handleButtonClicks);
dialog.className = 'hidden';
if (e.target === okButton) {
resolve(input.value);
} else {
reject(new Error('User cancelled'));
}
});
});
}
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('action');
var output = document.getElementById('prompt');
button.addEventListener('click', function() {
promptPromise('What is your name?').then(function(name) {
output.innerHTML = '' + name;
})
.catch(function() {
output.innerHTML = ' ̄\\_(ツ)_/ ̄';
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Async Dislogs Example</title>
<script src="//cdn.jsdelivr.net/bluebird/3.0.5/bluebird.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var time = document.getElementById('time-stamp');
clockTick();
setInterval(clockTick, 1000);
function clockTick() {
time.innerHTML = '' + new Date();
}
});
</script>
<style type="text/css">
#dialog {
width: 200px;
margin: auto;
border: thin solid black;
padding: 10px;
background: lightgreen;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<p>The current time is <span id="time-stamp"></span>.</p>
<p>Your name is <span id="prompt"></span>.</p>
<button id="action">Set Name</button>
<div id="dialog" class="hidden">
<div class="message">foobar</div>
<input type="text">
<div>
<button class="ok">Ok</button>
<button class="cancel">Cancel</button>
</div>
</div>
</body>
</html>function promptPromise(message) {
var dialog = document.getElementById('dialog');
var input = dialog.querySelector('input');
var okButton = dialog.querySelector('button.ok');
dialog.querySelector('.message').innerHTML = String(message);
dialog.className = '';
return new Promise(function(resolve, reject) {
dialog.addEventListener('click', function handleButtonClicks(e) {
if (e.target.tagName !== 'BUTTON') { return; }
dialog.removeEventListener('click', handleButtonClicks);
dialog.className = 'hidden';
if (e.target === okButton) {
resolve(input.value);
} else {
reject(new Error('User cancelled'));
}
});
});
}
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('action');
var output = document.getElementById('prompt');
button.addEventListener('click', function() {
promptPromise('What is your name?').then(function(name) {
output.innerHTML = '' + name;
})
.catch(function() {
output.innerHTML = ' ̄\\_(ツ)_/ ̄';
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Async Dislogs Example</title>
<script src="//cdn.jsdelivr.net/bluebird/3.0.5/bluebird.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var time = document.getElementById('time-stamp');
clockTick();
setInterval(clockTick, 1000);
function clockTick() {
time.innerHTML = '' + new Date();
}
});
</script>
<style type="text/css">
#dialog {
width: 200px;
margin: auto;
border: thin solid black;
padding: 10px;
background: lightgreen;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<p>The current time is <span id="time-stamp"></span>.</p>
<p>Your name is <span id="prompt"></span>.</p>
<button id="action">Set Name</button>
<div id="dialog" class="hidden">
<div class="message">foobar</div>
<input type="text">
<div>
<button class="ok">Ok</button>
<button class="cancel">Cancel</button>
</div>
</div>
</body>
</html>For your code snippet the implementation would be something like this:
function promptPromise(message) {
var dialog = document.getElementById('dialog');
var input = dialog.querySelector('input');
var okButton = dialog.querySelector('button.ok');
dialog.querySelector('.message').innerHTML = String(message);
dialog.className = '';
return new Promise(function(resolve, reject) {
dialog.addEventListener('click', function handleButtonClicks(e) {
if (e.target.tagName !== 'BUTTON') { return; }
dialog.removeEventListener('click', handleButtonClicks);
dialog.className = 'hidden';
if (e.target === okButton) {
resolve(input.value);
} else {
reject(new Error('User cancelled'));
}
});
});
}
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('action');
var output = document.getElementById('hint');
var el = document.getElementById('hint');
button.addEventListener('click', function() {
el.innerHTML = 'Please, reply to prompt';
promptPromise('Hello world').then(function(name) {
document.getElementById('prompt-call-output').innerHTML = '' + name;
})
.catch(function() {
output.innerHTML = ' ̄\\_(ツ)_/ ̄';
});
});
});#dialog {
width: 200px;
margin: auto;
border: thin solid black;
padding: 10px;
background: lightgreen;
}
.hidden {
display: none;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="action">Call native app</button>
<p id="hint"></p>
<p id="prompt-call-output"></p>
<div id="dialog" class="hidden">
<div class="message">foobar</div>
<input type="text">
<div>
<button class="ok">Ok</button>
<button class="cancel">Cancel</button>
</div>
</div>
</body>
</html>This is one of the issues regards prompts, alert, and confirm messages, they block javascript execution since the browser waits for user interaction, also they are considered bad UX implementation:
Dialog boxes are modal windows; they prevent the user from accessing the rest of the program's interface until the dialog box is closed. For this reason, you should not overuse any function that creates a dialog box (or modal window).
one of the solution to this is to implement your own prompts dialog, in this link from bluebird the address it using Promises with async dialogs:
function promptPromise(message) {
var dialog = document.getElementById('dialog');
var input = dialog.querySelector('input');
var okButton = dialog.querySelector('button.ok');
dialog.querySelector('.message').innerHTML = String(message);
dialog.className = '';
return new Promise(function(resolve, reject) {
dialog.addEventListener('click', function handleButtonClicks(e) {
if (e.target.tagName !== 'BUTTON') { return; }
dialog.removeEventListener('click', handleButtonClicks);
dialog.className = 'hidden';
if (e.target === okButton) {
resolve(input.value);
} else {
reject(new Error('User cancelled'));
}
});
});
}
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('action');
var output = document.getElementById('prompt');
button.addEventListener('click', function() {
promptPromise('What is your name?').then(function(name) {
output.innerHTML = '' + name;
})
.catch(function() {
output.innerHTML = ' ̄\\_(ツ)_/ ̄';
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Async Dislogs Example</title>
<script src="//cdn.jsdelivr.net/bluebird/3.0.5/bluebird.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var time = document.getElementById('time-stamp');
clockTick();
setInterval(clockTick, 1000);
function clockTick() {
time.innerHTML = '' + new Date();
}
});
</script>
<style type="text/css">
#dialog {
width: 200px;
margin: auto;
border: thin solid black;
padding: 10px;
background: lightgreen;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<p>The current time is <span id="time-stamp"></span>.</p>
<p>Your name is <span id="prompt"></span>.</p>
<button id="action">Set Name</button>
<div id="dialog" class="hidden">
<div class="message">foobar</div>
<input type="text">
<div>
<button class="ok">Ok</button>
<button class="cancel">Cancel</button>
</div>
</div>
</body>
</html>default