Currently, I am still working on a small one-product eCommerce portfolio project and I come through a couple of challenges within the project. I would like to describe one of them in this article. The main question I was trying to find an answer to was whether to use just a .js document with all the scripts or multiple ones. I solve this thanks to an error that occurred to me. The error was: Cannot read properties of null error.
The problem
It all started at the beginning of the project. I knew that the project would have a couple of subpages. The main page, product page, cart, and all the pages within the order process. At that time it was not clear to me how I could solve the problem with the script .js file. As I was using and saving data to arrays, creating Objects, etc. I was not sure that multiple .js files are the way of doing it.
Firstly I decided to go with one .js file for all the pages, but I was getting an error: Cannot read properties of null (reading ‘addEventListener’) on specific lines of code. At that time I was not aware of the solution for this error. So I switched to multiple .js files for a couple of subpages. The problem was that I wanted to use some information from my script.js file that was not available in the other files so I needed to add them again and therefore I created a couple of duplicates in the code. It was clear to me that this is not the right way of approaching it. That is why I come back to the first idea of 1 script.js file with all the scripts for the whole website, but I needed to come up with a solution.
Cannot read properties of null. What does it mean?
Firstly I needed to find out what is this error all about. I had a suspicion that the error will be somehow related to the fact that I was using a single script.js file on all pages and some of the pages did not have all the elements where I was using .addEventListener available and that is why I was getting properties of null when reading addEventListener on specific elements defined in the file.
Of course, I was trying to google what is this error about. I found 2 of the most often moments when this error occurs:
1. The first situation is when we are trying to access addEventListener method on DOM element that does not exists
2. Or we insert the script.js file above the HTML so it is not possible to read the properties of DOM elements that are declared within the HTML
When I read these 2 situations when the error could occur I realized that the first point in my case. For the second point, I was sure that I am OK because I linked my script.js as follows: <script src=”/script.js” defer></script> The word defer has its role. It enables the script.js is downloaded at the same time as the parsing of the website is executing, but it is executed after the parsing of the website is done.
My problem was that the linked script.js included some of the elements that were used in the addEventListener method in the script.js but were not available on all pages where I used the script.js file.
What is the solution of this problem?
Personally, I found the solution to this problem. I researched a couple of resources and come up with the following. What I needed to check if the element was available on the page before the addEventListener was executed. For this, we could use the if-else statement to check whether the element (in my case the value of a variable) is “null” or “undefined”.
There is also a shorter way of solving this thanks to optional chaining (?.). In my case, this operator checks the value of a variable. If the value is null or undefined it returns undefined and does not throw an error. If there is any value it will continue in the execution of addEventListener.
This perfectly worked for my case as I needed to check if the variables where I had addEventListeners had some value. In other words, were available on the particular page so the addEventListener could be executed. And if there was no value also no error would occur and the code could continue in running.
The last word
So I realized that having multiple script.js files is not the way I wanted to go not only because of duplicates that I was creating in the code but also because it enables me to work more efficiently with one file. Thanks to an error: Cannot read properties of null, that occurred to me while I was trying to use just one file, I learned new things and now I can use just one script.js file.
You can read the first part and the second part of this series.
Resources
I read couple of articles for finding the solution about the error:
Solve – Cannot read Property addEventListener of Null in JS
Follow me on socials or write me an email or message on Linkedin
Sorry for any mistakes. If you find any please let me know. You can find my contact info down below.
I am just a beginner. Do not take this as final and the only solution. I am just sharing my learning journey. If there are any advices related to code shoot me an email.
