Where to put JavaScript Code

Here are four places where you can put your JavaScript code.

1) Inline JavaScript

You can put JavaScript code into an element’s onclick event attribute. This also works for other types of events.

Example:

<button onclick="console.log('hello');">Click Here</button>

The code inside the double quotes is a JavaScript command that will run every time the button is clicked. Note that this example uses single quotes inside of double quotes to avoid a bug where you accidentally close the double quotes in the middle of your JavaScript command.

This works when the code you want to run is very simple, and it requires the least amount of additional structure when you’re only doing one thing. For multi-line code, or for something that will be used in more than one place in your page, you should probably create a function instead.

Using lots of inline code can make it hard to read your website’s code, because it mixes two or more languages together. Developers typically prefer to separate the content (HTML), styles (CSS), and programming (JavaScript) into their own sections, or even their own files.

2) Functions in <head> or <body> sections

You can put JavaScript code inside <script> tags anywhere in your HTML document. The <head> section is a great place to declare functions that will be called later.

<head>
<script>
function clicked(){
	console.log('button clicked');
	P = document.getElementById('mytext');
	P.innerHTML ="DONE";
}
</script>
</head>

<body>
	<button onclick="clicked();">
		Click here when done
	</button>
	<p id="mytext">not done</p>
</body>

This page has three commands to do each time the button is clicked. Those are declared in the clicked() function in the <head> section. The button has an onclick attribute set to “clicked();”

This example would still work the same if the <script> tags were moved to the end of the body section.

If you need something to happen before the page’s elements are created, put the <script> tags at the beginning. Put them at the end instead if you need the code to run after the elements are created.

3) At the end of the <body> section

Sometimes you need your JavaScript to run right after your page loads. You can do that more reliably using the body’s onload attribute, or use the jQuery document ready function, but it’s similar to simply put the <script> tags at the end of your document for simple pages.

Example: let’s say you want to use JavaScript to hide an element when the page loads:

<head>
</head>
<body>
  <p>Visible</p>
  <p id="secret">Hidden</p>
  <script>
    s = document.getElementById('secret');
    s.style.display = 'none';
  </script>
</body>

It’s important that the style.display = ‘none’ code comes after the secret paragraph is rendered. If you put that in the <head> section, the getElementById(‘secret’) call will fail, because that element doesn’t exist yet.

4) Code in a Separate File

For pages with a lot of JavaScript code, or for code that’s used in multiple HTML pages, it makes sense to store the code in its own file, whose name should end in a “.js” file extension.

As an example, let’s say you write a function that rounds numbers to two decimal places. Maybe you have a number of other generally useful functions in the same file. That, and any other generally useful functions, goes into a file called “utility.js” as follows:

//put in a separate file named "utility.js"
function round(x){
	result = Math.round(x * 100) / 100;
	return result;
}

Notice that this JavaScript file needs no script tags. In fact, script tags would cause the code to fail.

Now you can load that code in any HTML file by including this tag in the file:

<script src="utility.js"></script>

Here’s an example using the external “utility.js” file:

<body>
  <p id="math"></p>
  <script src="utility.js"></script>
  <script>
  	var m = document.getElementById('math');
  	var x = round(1/7);
  	m.innerHTML = "1/7 equals approx: " + x;
  </script>
</body>