Shopping Cart Error :: Cannot add items to the "Shopping Cart Page " :: Cannot set property 'textContent' of null

I am busy doing a task creating a shopping cart via HTML, CSS and Javascript. I have been following a Youtube tutorial, but there seems to be a glitch somewhere and, after trying a couple of things, I still receive the following error:

**main.js:76 Uncaught TypeError: Cannot set property 'textContent' of null
    at onLoadCartNumbers (main.js:76)
    at main.js:173
onLoadCartNumbers @ main.js:76
(anonymous) @ main.js:173**

I think that it might be that in console, the first time you add an item to the cart, the first output is 0. I tried targeting this, but have not had any success. I am unfortunately, due to this error, not able to add the items to display on the "Shopping Cart" page and cannot move forward with the task.

Please see the Code Snippet below:

https://jsfiddle.net/ChanelleB/cwmzs20b/

In addition, please see below the code for the "Shopping Cart" HTML content:

<!DOCTYPE html>

<html lang="en">

<head>
    <title>Shopping Cart</title>
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
        integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
    <nav class="top_nav">
        <img src="images/Logo.png" alt="Logo" id="logo" />

        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <a href="index.html">Home</a>
            <a href="AboutUs.html">About Us</a>
            <a href="Catalogue.html">Catalogue</a>
            <a href="ContactUs.html">Contact Us</a>
        </div>
        <span id="hamburger" onclick="openNav()">&#9776;</span>

        <div id="search_bar">
            <input type="search" placeholder="search..." />
            <button><i class="fas fa-search"></i></button>
        </div>

        <a href="ShoppingCart.html" class="button" id="add-to-cart-button">
            <ion-icon name="trolley"></ion-icon><i class="fas fa-shopping-cart" id="cart"> Cart:</i><span
                class="amount-products">0</span>
        </a>
    </nav>

    <div class="products-container">
        <div class="product-header">
            <h5 class="product-title">PRODUCT</h5>
            <h5 class="price">PRICE</h5>
            <h5 class="quantity">QUANTITY</h5>
            <h5 class="total">TOTAL</h5>
        </div>
        <div class="products">

        </div>
    </div>

    <footer>
        <p> &copy; Hyperion Development.&nbsp;&nbsp; All Rights Reserved.&nbsp;&nbsp; Proudly created by <a
                href="http://www.hyperiondev.com">Hyperion Development</a></p>
    </footer>

    <script type="text/javascript" src="js/main.js"></script>
</body>

</html>

I would appreciate any assistance that anyone is willing to offer.

Solution

Since the behavior of the document.querySelector() function requires that the DOM is ready and parsed, you could add this to your JS file and call your js files from wherever you like:

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.querySelector('input[type=file]')
        .addEventListener('change', function(event){
            ...
         }
});

Also take a look at the documentation to resolve any doubts: https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event