luke214 Posted October 29, 2016 Share Posted October 29, 2016 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 More sharing options...
dsonesuk Posted October 29, 2016 Share Posted October 29, 2016 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 More sharing options...
luke214 Posted October 29, 2016 Author Share Posted October 29, 2016 (edited) I actually did that javascript code in a seperate .js file, is that wrong? 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 October 29, 2016 by luke214 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 29, 2016 Share Posted October 29, 2016 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. 1 Link to comment Share on other sites More sharing options...
luke214 Posted October 29, 2016 Author Share Posted October 29, 2016 IT WORKS!Thank you so much Makes perfect sense to me now! Link to comment Share on other sites More sharing options...
luke214 Posted October 30, 2016 Author Share Posted October 30, 2016 (edited) 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 October 30, 2016 by luke214 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 30, 2016 Share Posted October 30, 2016 There is no reason why it shouldn't from what I can see, unless you told it not to display further alerts Link to comment Share on other sites More sharing options...
luke214 Posted October 30, 2016 Author Share Posted October 30, 2016 Well everything works apart from the timing on when it says welcome :/ Link to comment Share on other sites More sharing options...
dsonesuk Posted October 30, 2016 Share Posted October 30, 2016 (edited) 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 October 30, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
luke214 Posted October 30, 2016 Author Share Posted October 30, 2016 Oh no, everything works perfectly, as shown in my screenshots all I want is for the "Welcome" text to appear with everything else at the same time Link to comment Share on other sites More sharing options...
dsonesuk Posted October 30, 2016 Share Posted October 30, 2016 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 More sharing options...
luke214 Posted October 30, 2016 Author Share Posted October 30, 2016 INSIDE the window.onload! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now