External JS Files: Sharing JavaScript Across Pages

Topics covered in this JavaScript tutorial:

Externalizing JavaScript, Linking to the JavaScript file

Exercise Preview

Exercise Overview

In this exercise, we’ll learn how to externalize JavaScript so it can be shared across multiple webpages.

Getting Started

1. For this exercise we’ll be working with the Sharing-JavaScript folder located in Desktop > Class Files > JavaScript Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
2. In your code editor, open chair.html from the Sharing-JavaScript folder.
3. Preview chair.html in a web browser.

This is the product color chooser you finished in the previous exercise.

6. Switch back to your code editor.
7. Open wall-clock.html from the Sharing-JavaScript folder.

8. Preview the page in a browser.

   Notice this page looks the same and also has a color chooser, but it currently does not work because we have not added any JavaScript yet.

   Because we’re already written the code to make a color chooser work, let’s reuse the code across both of these pages (imagining it could work across any number of product pages).

Externalizing JavaScript

If we copy and paste the JavaScript code into each page, we’ll end up with many copies, making updates difficult. Instead we’ll move the JavaScript code into a shared .js file, and link multiple HTML pages to it.

1. Switch back to your code editor.
2. Switch back to chair.html.
3. Find the script tag at the bottom.

4. Select all the code between the opening and closing script tags. Do not select the <script> and </script> tags!

   <script>
      let productPhoto = document.getElementById('product-photo');
   

   Code Omitted To Save Space

      }
   </script>
   

5. Cut the code.

6. Create a new file.

7. Paste the code into it.

8. Save the file as main.js into the js folder in the Sharing-JavaScript folder.

Linking to the JavaScript File

We need to link our HTML file to the external JavaScript file we just made.

1. Switch back to chair.html.

2. Edit the tags as shown below (make sure to delete any extra lines and spaces between the opening and closing script tags):

      <script src="js/main.js"></script>
   </body>
   

3. Save and preview chair.html in a browser.

Test out the color buttons to see they should still work.

5. Switch back to your code editor.
6. Switch to wall-clock.html.

7. At the bottom of the document, before the closing </body> tag add the following bold code:

      <script src="js/main.js"></script> 
   </body>
   

8. Save the file.

Making the Code Work for Any Product

Our color chooser JS currently has the the chair product name hard-coded into the image path. To make this work with any product, we’re going to have to make a minor change.

1. Here in wall-clock.html, find the image with the id product-photo.

   Notice it has a class of wall-clock. (In the other page, it has a class of chair.)

   So the class is the product name, which we can grab to use in our JS so we’ll know which image to load.

2. Switch to main.js.

3. In the changeColor() function, replace chair as follows:

   productPhoto.src = 'img/' + productPhoto.className + '-' + this.id + '.jpg';
   

   NOTE: Pay close attention to the single quotes and pluses.

4. Save the file.

5. Preview wall-clock.html in a browser.

   Hover the color buttons to see they now work!

6. Preview chair.html in a browser and see it still works too. Nice!