Javascript prompt loads before page displays-CodePudding

I added a prompt on my page but it loads before the page has loaded. How do I only show the message once the whole page is visible?

Here is my prompt:

if (name == null || name == "") {
  txt == "No name provided";
} else {
  txt = "Hello, "   name   "! How are you today?";
}
alert(txt);

CodePudding user response：

If you wrap the code in an event-listener that listens for the DOMContentLoaded event it'll run only once the document is ready:

window.addEventListener('DOMContentLoaded', (e)=>{
  if (name == null || name == "") {
    txt == "No name provided";
  } else {
    txt = "Hello, "   name   "! How are you today?";
  }
  alert(txt);
});

I have, however, adjusted your original code to:

window.addEventListener('DOMContentLoaded', (e) => {
  // assign the name via the prompt() interface, and
  // declare both variables (rather than accidentally
  // creating globals):
  let name = prompt("Hi, what's your name?"),
      txt;
  // name won't be null, but it may be falsey, so here
  // we check if the name is falsey:
  if (!name) {
    // if the user cancels the prompt, prompt() returns
    // false; if they provide an empty-string that
    // empty string is falsey:
    txt = "No name provided";
  // if the name variable is truthy:
  } else {
    // we use a template literal String to interpolate
    // the variable 'name' into that string:
    txt = `Hello, ${name}! How are you today?`;
  }
  // I wouldn't recommend alert, but I left this unchanged:
  alert(txt);
});

JS Fiddle demo.

References:

CodePudding user response：

So to solve the problem of prompt loads before page displays:

put your script tag just before the closing </body> not in the <head> tag.
other option as David Thomas suggest is to listen to the DOM has been loaded with DOMContentLoaded & addEventListener or simply with window.onload.

CodePudding user response：

One of the simplest ways of doing this must be: window.onload = alert("text");. Also, consider placing the code just before the closing body tag or using an event listener of some kind for further control over the message display.