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);
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);
});References:
So to solve the problem of prompt loads before page displays:
script tag just before the closing </body> not in the <head> tag.DOMContentLoaded & addEventListener or simply with window.onload.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.