Javascript prompt loads before page displays

July 11, 2022

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

>Solution :

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: