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

Brittany Halterman
Brittany Halterman
9,832 Points
Posted by Brittany Halterman
Brittany Halterman
9,832 Points

My message is not displaying during my countdown alerts.

My message is not displaying during my countdown alerts. I am confused because my script is at the end, just before the close of the body. Shouldn't the code for the header therefore run before the code for the script? Or did I make some other error?

// 1. Display an alert dialog with the content: "Warning! This message will self-destruct in"
alert("Warning! This message will self destruct in...");

// 2. Display a "3... 2... 1..." countdown using 3 alert dialog boxes
alert("3...");
alert("2...");
alert("1...");

// 3. This statement selects the <h1> element and replaces its text with "BOOM!".
document.querySelector("h1").textContent = "🔥BOOM!🔥";

// 4. Log "Message destroyed!" to the console
console.log("Message destroyed!");

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript Basics – Challenge</title>
    <link href="css/style.css" rel="stylesheet">   
  </head>
  <body>
    <main>
      <h1>"Just another Hello World!"</h1>
    </main>
    <script src="js/script.js"></script>    
  </body>
</html>

Thanks!!

2 Answers

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff
Rohald van Merode
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hi Brittany Halterman 👋

Which message do you mean exactly? When your JavaScript is running and showing the first alert the code is paused from running until the user clicks to remove that alert. Then the 3... alert comes in and this gets repeated until the user as clicked the Ok button on that last 1... alert. After that the remaining lines will be executed and 🔥BOOM! 🔥 will be added to the DOM as well as the message getting logged to the console.

I hope this answers your question 🙂

Brittany Halterman
Brittany Halterman
9,832 Points
Brittany Halterman
Brittany Halterman
9,832 Points

Thank you, Rohald! I removed the quotation marks from the header, and it displays the first time I click to preview, but when I refresh, the header is not displaying. In the original code, the header says "Hello, JavaScript!" I switched this text element to say "Just another Hello World." This is the message that self destructs, right? By running the script at the end of the body, the text element should load before the alerts, so that it is displayed when the page loads? I guess if I got it to load when I click preview, I have the lesson figured out, but I am wondering if there is something wrong that it does not load the text element when I refresh.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 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
});