Does my own prompt window stops javascript execution?

Question

I am new at javascript. I want to make a javascript function to wait until a user input. I know I can use prompt but the window does not look good, so I want to make my own prompt window. I search and found that I can do it using jquery ui or by simply creating my window using html+css+javascript, but my question is: If i create my own prompt window does the function waits until the input is given? Or does it simply calls a function after the input is given?

This is basically what I want to do:

function () 
{
   var input = MyPrompt(); //Wait here for a user input, like a c scanf

   //Rest of the function who will use the input given

}

I really need that the javascript function stops executing, like a scanf or a prompt would do. Because most of the solutions I found simply call a function after you click the "confirm" button

Thanks

Answer 1

By the nature of JavaScript there is no way to "pause" an execution of a javascript application. Thats why in JavaScript most external call handlers (like url calls or file system operations in NodeJS) are implemented as callbacks.

EcmaScript spec creators are trying to provide async/await features, but in fact this is just a syntactic sugar for promises.

Your best bet is to create your own "prompt" or use any of already existing like this and put what you want to do after getting user input as a "callback" to that prompt:

showMyPrompt({
  success: function(value){ console.log('User said ', value); },
  close: function(){ //handle pressing of a "cancel" button if needed }
})

and in your dialog function:

function showMyPrompt(params){
  // show your prompt here
  $('.dialog-ok-button').click(function(event){
    event.preventDefault();
    var value = $('.my-prompt-input').val();
    params.success && typeof params.success == 'function' && params.success(val);
  });

  // and do similar for "cancel" 
}

Answer 2

A simple async/await based solution might look like this. Notice that your original function is written the same way--aside from the addition of async and await.

function MyPrompt() {
    return new Promise((resolve, reject) => {
        let dialog = document.createElement('dialog');
        dialog.innerHTML = `
            <form>
                <input type="text" required>
                <button type"submit">Ok</button>
            </form>
        `;
        document.body.appendChild(dialog);
        dialog.showModal();
        dialog.querySelector('form').addEventListener('submit', e => {
            e.preventDefault();
            dialog.remove();
            resolve(dialog.querySelector('input').value);
        });
    });
}

(async function ()
{
   var input = await MyPrompt(); //Wait here for a user input, like a c scanf

   console.log(input);
   //Rest of the function who will use the input given

}());