Linking javascript to html

JavaScript
1

i have 3 files.

app.js
index.html
gallery.html

i have a script tag on the index.html page so it links the app.js to the index.html

i also have the same script tag on the gallery.html

the app.js file has code that changes the dom in both html files. is this the correct way to link the app.js file to the html pages, because I am getting javascript errors when I try to do something on the gallery.html page, and I think it is because the app.js file is expecting to find some the html elements from the index.html page but cannot so does not know what to do. hopefully that made sense

2

Can you post your code? Specifically, can you post your script tags?

It could be that the link to the app.js file isn’t correct. Maybe it’s in a different folder. But this is just an assumption, as I don’t have too much to go off of. If you can, give us the specific errors you’re getting and describe your file tree to us.

1 Like
3

@egglearn This is the standard way of adding a JavaScript file to an HTML page.

index.html

<!DOCTYPE html>
<html lang="en">

  <head>

  </head>

  <body>



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

  </body>

</html>

You can add the same line <script src="app.js"></script> in gallery.html if you have JavaScript code running on that page.

What errors are you getting?

1 Like
4

Also, where on each page is the link? If the js is linked in the head of the html, it may well be that the script is running before the DOM exists.

Either add a defer tag to the script (if you plan to keep it in the head) or move the script to the very end of the body, if it isn’t there already.

5

code is like this on the gallery page , the errors I am getting are things like

TypeError: Cannot set property ‘textContent’ of null which refers to this part of the js file

let htmlDate = document.getElementById(“date”);
htmlDate.textContent = date;

but this works fine when Inspect the page when I am on index.html, so thats why to me it seems like when the app.js runs on gallery.html , it expects to find some of of the elements that are taken from the index.html page because I have things like, document.getElementById(“dkf”) which refers to things on the index.html page, but are not on the gallery.html page, is that normal?


<!DOCTYPE html>

<html>

    <head>

        <link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1">

    </head>

    <body>

        <div id="my_dataviz"></div>

                                           
         

         <script src="https://www.gstatic.com/firebasejs/8.3.3/firebase.js"> </script>

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

       <script src = "https://d3js.org/d3.v4.min.js"></script>

    </body>

</html
6

@egglearn It looks like the app.js file is looking for the id='date' on one of the pages but it is not there.

7

it is on the index.html page, and works fine on that page, thats kind of what I mean, the js has a bunch of references to elements that are on the index.html page so when it runs on the gallery.html page it doesnt seem to to know that for example date refers to something on the index.html page

8

@egglearn In the app.js file try this code:

let htmlDate = document.getElementById('date');

if (htmlDate) {
    htmlDate.textContent = date;
}
1 Like
9

If you have different pages with different elements, but only one JS file with all the code then you are bound to get such errors.

You can load different scripts per page, or as suggested, you can make sure you always check the elements before using them (mind the quotes in the copy-pasted code BTW, they should be '' or "").

1 Like
10

You could use location.pathname:

if (location.pathname === '/'){
  // all the code for the index.html
}

if (location.pathname === '/gallery.html'){
  // all the code for gallery.html
}

If you have code that is used by both pages (maybe to style a menu or something), put it outside of the if-statements.

2 Likes
11

thanks everyone I will try these tips out

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.