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

Question

我正忙于通过 HTML、CSS 和 Javascript 创建购物车。我一直在关注 Youtube 教程，但似乎某处出现了故障，在尝试了几件事之后，我仍然收到以下错误：

**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**

我认为可能是在控制台中，第一次将商品添加到购物车时，第一个输出为 0。我尝试针对此目标，但没有成功。很遗憾，由于这个错误，我无法添加商品以显示在“购物车”页面上，也无法继续执行任务。

请参阅下面的代码片段：

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

另外，请看下面的“购物车”代码HTML内容：

<!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>

如果有人愿意提供帮助，我将不胜感激。

Answer 1

由于 document.querySelector() 函数的行为要求 DOM 准备好并解析 ，您可以将其添加到您的 JS 文件并从您喜欢的任何地方调用您的 js 文件：

// 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){
            ...
         }
});

另请查看文档以解决任何疑问：https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

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

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

html

javascript

json

e-commerce