Multiple javascript files?

1

Hi community, I am actually new to web development and coding, recently I try to create a website using html, css and javascript and I have multiple html files but only one css and one javascript file.

Here is my problem, in my javascript file I am getting a DOM element from the second html page and adding a class to it but when I visit my other pages the console shows an error( Uncaught TypeError: Cannot read property ‘classList’ of null ), the error only disappear when I visit the second html page which is where I grab the DOM from.

index.html

    <body>
        <div class="index">
            <h1>Index</h1>
        </div>
        <script src="./script.js"></script>
    </body>

about.html

    <body>
        <div class="about">
            <h1>About</h1>
        </div>
        <script src="./script.js"></script>
    </body>

contact.html

    <body>
        <div class="contact">
            <h1>Contact</h1>
        </div>
        <script src="./script.js"></script>
    </body>

script.js

const aboutContainer = document.querySelector('.about');
aboutContainer.classList.add('show');

error-null

Am I missing something out in my code or I can’t just use one script file for all my html files? do I need to give each html their own javascript file?
something like:
index.html --> index.js
about.html --> about.js
contact.html --> contact.js

But what about if I have 10 html files do I also need to create 10 javascript files?
is this the correct way, like creating 5 html pages and also have 5 javascript files?

Thanks

2

You can either have separate files or a single JS, as always there are tradeoff whatever route you take, so it’s a matter of understanding the HOWs.

Besides that, the issue is probably when you execute your javascript code.
I imagine a scenario like this.

  • user requests / -> your server send back index.html
  • browser start parsing html - css - js
  • while executing JS it finds the line
const aboutContainer = document.querySelector('.about');
  • Well that container does not exists so it’s null.
  • Wait, why are you asking me classList of something that does not exists? panic! :smile:

At this point is up to you to tell the browser to not perform anything if the given container is not found

const aboutContainer = document.querySelector('.about');
if(aboutContainer) {
 // do something
}

Hope this helps :+1:

1 Like
3

Hi thanks for the reply, so there is no best practice way to do it? so I can choose either using single js file or multiple js files? also what about if I am developing a php website, I can use this way too to manipulate DOM element or is there a php special way to link js files…

Thanks

4

What is the reason for different class names for .index, .about and .contact?.. Their function seems to be the same - wrapping heading element.

1 Like
5

Hi thanks for the reply, yeah above code is just an example, I tried to make it like that to easily show what my problem is, my problem is when using one js file to target a DOM element in a.html but when I visit b.html I get the error, sorry for the confusion.