Jump to content

Basic prompt function not working


luke214

Recommended Posts

So I have some HTML which shows;

 

<header>
<h1 id="welcome"></h1>
<p>Welcome to my website about Minerals and Rocks!<br>
Hopefully you'll find some useful information to help you!</p>
</header>
What I want my prompt function to do is ask the user what their name is, then insert it in-between the h1 tags.
Here's my javascript for it;
var yourname = prompt("What is your name?")
if(yourname !=null){
document.getElementById("welcome").innerHTML = "Hello" + yourname;
} else{
alert("Please enter a name next time");
}
I don't see the problem, however nothing is inserted when I type a name into the prompt box, as shown in the screenshot in this link > http://pasteboard.co/kLpNXWcd0.jpg

 

Link to comment
Share on other sites

You should give us a link or relevant code as it is within your page, did you get an error? like document.getElementById("welcome") is null, then it is most likely you have placed this code above <h1 id="welcome"></h1>, which means as the page loads from top to bottom and come across the ref to id 'welcome' (document.getElementById("welcome").innerHTML = "Hello" + yourname;), that element with id reference has not been rendered yet! and therefore does not exist yet! and that is why it throws an error of document.getElementById("welcome") is null.

Link to comment
Share on other sites

I actually did that javascript code in a seperate .js file, is that wrong? :o

There wasn't an error, it works if i don't type in a name, as it comes up with the "Please enter a name next time" message, but if i do put a name in, it doesn't show on my web page

Edited by luke214
Link to comment
Share on other sites

Linking to to a external js from head tag does exactly the same thing, render from top, comes to link stop to execute/read JavaScript code prompts for name, enter name, goes to enter name in element with specific id, at that point it still at executing js code, it has not moved down to render <h1 id="welcome"></h1> YET!, you WILL get an error in browser developers console (F!2), because that element has not being rendered yet! and does not exist YET!, the alert if cancel button is clicked, will show because it is not reliant on a specific element existing just the event of clicking 'cancel' button.

 

In this situation, you would move the JavaScript or link to JavaScript below the targeted id element OR use

window.onload=function(){

//place code here

}

What this does is WAIT, until the page including all elements are rendered FIRST, then execute your JavaScript code.

  • Like 1
Link to comment
Share on other sites

So now I have the same code;

 

window.onload=function()
{
if (yourname ===""){
document.getElementById("welcome").innerHTML = "Welcome!"
alert("Please enter a name next time");
}
else if (yourname !=null){
document.getElementById("welcome").innerHTML = "Welcome " + yourname + "!";
} else {
alert("Please enter a name next time"), document.getElementById("welcome").innerHTML = "Welcome!";
}
}
It works perfectly, however when i load the page after not typing a name in or cancelling, you see this > http://pasteboard.co/27ipN990i.png
Then after clicking "ok" it then turns to this > http://pasteboard.co/laZcf175X.png
What I want to know is, how do I make the Welcome! text appear BEFORE clicking the Ok box, so it doesn't look like there's just nothing, then once clicking OK it appears..
Thanks!
Edited by luke214
Link to comment
Share on other sites

The youname variable will return null or the text entered, it will never return "" unless you click OK while it the input box is empty, if you want Welcome to appear, place it into the actual html, as it was before.

 

alert("Please enter a name next time"), document.getElementById("welcome").innerHTML = "Welcome!";

 

should be

 

alert("Please enter a name next time"); document.getElementById("welcome").innerHTML = "Welcome!";

Edited by dsonesuk
Link to comment
Share on other sites

I think I understand, because you have

 

var yourname = prompt("What is your name?");

 

outside the window.onload ,it executes and waits for response, and until then the page stops rendering any further and you have a blank page until 'OK' or 'Cancel' is pressed on the prompt box.

 

Now GUESS where you should place the defining of that variable to fix this.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...