Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Basics Hello, JavaScript! JavaScript Challenge Solution

jcruzaxaeon
seal-mask
.a{fill-rule:evenodd;}techdegree
jcruzaxaeon
Full Stack JavaScript Techdegree Student 16,220 Points
Posted by jcruzaxaeon
.a{fill-rule:evenodd;}techdegree
jcruzaxaeon
Full Stack JavaScript Techdegree Student 16,220 Points

Upon page refresh, original H1 message does not always reload

I'm running the correct solution. However, once I reach the BOOM message, if I do nothing but refresh the browser (Google Chrome and Microsoft Edge), the BOOM message is erased, the webpage's original H1 message does not reload, so the page has no text, but the dialog boxes run fine and the webpage displays the BOOM message after clicking through them all.

I can get the original H1 message to reload sometimes, if I wait, or click other tabs, but it's not consistent.

3 Answers

Steven Parker
Steven Parker
229,785 Points
Steven Parker
Steven Parker
229,785 Points

It's common for modern browsers to delay page rendering until the initial JavaScript code finishes. One way to account for this is to wrap your code in a timeout callback, to cause it to run concurrently with the render:

setTimeout(() => {
  // put the existing code here
});
jcruzaxaeon
seal-mask
.a{fill-rule:evenodd;}techdegree
jcruzaxaeon
Full Stack JavaScript Techdegree Student 16,220 Points
jcruzaxaeon
.a{fill-rule:evenodd;}techdegree
jcruzaxaeon
Full Stack JavaScript Techdegree Student 16,220 Points

Good to know! Thank you so much! The timeout call helped properly re-render the page on a Refresh 100% of the time when I added a 50ms delay.

I was confused because the videos mentioned that a common place for the Script Element linking my JS file to the HTML file is just before the Closing Body Tag so that the Browser could render the markup at the beginning of the HTML document before executing the JS file. Looks like current browsers render this technique obsolete >.<

I'll keep the rendering delay in mind from now on!

Again, thank you so much!

Steven Parker
Steven Parker
229,785 Points
Steven Parker
Steven Parker
229,785 Points

There's also a "load" event that fires when the page has been rendered, and you can create a listener for that event to start your code. This is a more common (and more robust) method than the timer.

Andrei Kunevsky
seal-mask
.a{fill-rule:evenodd;}techdegree
Andrei Kunevsky
Full Stack JavaScript Techdegree Student 1,542 Points
Andrei Kunevsky
.a{fill-rule:evenodd;}techdegree
Andrei Kunevsky
Full Stack JavaScript Techdegree Student 1,542 Points

Hi Joel,

Are you able to please post the completed code with this solution? I am also having an issue rendering the initial H1 tag, but am unable to understand where I should insert the setTimeout or load event functions.

Thanks for any help!

Devin Cushard
Devin Cushard
2,236 Points
Devin Cushard
Devin Cushard
2,236 Points

Thanks for the tip. Worked like a charm.