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 Foundations Variables Basics

Posted by Rajvansh Sharma
Rajvansh Sharma
333 Points

I was asked to move the script....and the "title" element is h1 and i have placed script after h1...it is showing error

the error says to put the script just before the tag</body>...why we need to put it there when we can solve the purpose by placing it just after </h1>...

index.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title> JavaScript Foundations: Variables</title>
    <style>
      html {
        background: #FAFAFA;
        font-family: sans-serif;
      }
    </style>   
  </head>
  <body>
    <h1 id="title">JavaScript Foundations</h1>
     <script src="myscript.js"></script>
    <h2>Variables: Basics</h2>

    <div id="container">
      This is a div with the id of "container"
    </div>
  </body>
</html>
myscript.js 
/* JavaScript Foundations: Variables */

var bgColor = "red";
var textColor = "white";

var container = document.getElementById('title');
container.style.background = bgColor;
container.style.color = textColor;

1 Answer

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

You need to place the script tag just above the end of the body so the script can be executed after the page is fully loaded

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> JavaScript Foundations: Variables</title>
    <style>
      html {
        background: #FAFAFA;
        font-family: sans-serif;
      }
    </style>

  </head>
  <body>
    <h1 id="title">JavaScript Foundations</h1>
    <h2>Variables: Basics</h2>

    <div id="container">
      This is a div with the id of "container"
    </div>
    <script src="myscript.js"></script>
  </body>
</html>
```html