Have javascript prompt only display after page is loaded

Question

we are building off a battleship game in github. Battleship

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.

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('> ' + 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');
});

However, the all the prompts are asked before the page is loaded.

some of the prompts are

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");

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?

So are you saying that the second snipplet of code you provided that is calling the ask/write methods is not inside a document ready? @paris_serviola — Taplar, Nov 29 '16 at 04:01
The code that is call ask/write method is also inside document ready — paris_serviola, Nov 29 '16 at 04:18
Use window.onload. See the answer to this question http://stackoverflow.com/questions/21742867/jquery-ready-vs-window-onload#21742922 — david25272, Nov 29 '16 at 05:01

score 1 · Accepted Answer · answered Nov 29 '16 at 04:07

1

It's a good habit to put your JS script tags at the end of the body, so that all your HTML loads first.
The browser engine loads HTML and JS in the order they appear in the document, but it's better to take ownership of that load order. One possible event order is:
- domsole.js loaded.
- battleship.js loaded.
- index.html document ready event.
- Game starts here.

No JS code should have executed before that last step. So make sure that your prompts are not called prior to that point.

answered Nov 29 '16 at 04:07

yelsayed

5,236
3
27
38

The only way to control loading order of scripts is to literally add the script tags and possibly remove them afterwards from javascript in a predefined order. HTTP 2.0 allows multiple documents to be loaded concurrently which means that this "trick" isn't guaranteed to work in future browsers. – Ralph Ritoch Nov 29 '16 at 04:30

Ralph Ritoch · Answer 2 · 2016-11-29T04:43:34.513

It seems that you don't understand the execution flow of your application. There is no possible way that these questions are displayed before the page is loaded unless you have another call to the init function that you have not mentioned. The output variable will be undefined until the init method is called and would therefore lead to javascript errors if ask was called before init is called. It seems that you are mistaking "loading" for "rendering". If you want to ensure that rendering of the page has been completed before your code is executed than you should use a timeout of around 50ms to call your initialization functions. Any modifications to the page triggered in jquery's ready event will not be displayed until after the event processing is completed. By calling the setTimeout function within the ready event handler you can delay processing until after the rendering of ready event handlers are completed.

Have javascript prompt only display after page is loaded

2 Answers2