Have javascript prompt only display after page is loaded
<p>we are building off a battleship game in github. 
<a href="https://github.com/alexbain/battleship" rel="nofollow noreferrer">Battleship</a></p>

<p>Here user, is prompted with his name and position of his ships and based on the answer, output is displayed on a textarea called domsole.</p>

<pre><code>Domsole = (function($) {
var output;

var init = function(outname) {
    output = $('#'+outname);
    output.attr('disabled', 'disabled');
};

var ask = function(question) {
    write(question);
    var text = prompt(question);
    write('&gt; ' + text);
    return text;
};

var write = function(text) {
    output.append(text + "\n");
    output.scrollTop(9999999999);
};

return {
    ask: ask,
    init: init,
    write: write
};
})(jQuery);

$(document).ready(function() {
     Domsole.init('domsole_out');
});
</code></pre>

<p>However, the all the prompts are asked before the page is loaded. </p>

<p>some of the prompts are</p>

<pre><code>this.name = Domsole.ask("What's your name, Playa?");

    Domsole.write("Alright, " + this.name + " you shall be.");
........
......
       var coord = Domsole.ask("Where would you like to take a shot? Valid input is: x, y");
</code></pre>

<p>These code that calls Domsole.write and Domsole.ask are also in document.ready.
Here all the prompts are asked before anything is displayed on the screen? How to resolve this issue? </p>