时间戳

首页 > 解决方案 > addEventListener 不工作。错误说 main2.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of null at main2.js:1

javascript - addEventListener 不工作。错误说 main2.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of null at main2.js:1

问题描述

let carts = document.querySelectorAll('.add-cart');

let products = [
    {
        name:'Heinz Beanz',
        tag: 'heinzbeans',
        price: 2.55,
        inCart: 0
    },
    {
        name:'brown Beanz',
        tag: 'brownbeans',
        price: 2.55,
        inCart: 0
    },
    {
        name:'white Beanz',
        tag: 'whitebeans',
        price: 2.55,
        inCart: 0
    },
    {
        name:'black Beanz',
        tag: 'blackbeans',
        price: 2.55,
        inCart: 0
    },
    {
        name:'red Beanz',
        tag: 'redbeans',
        price: 2.55,
        inCart: 0
    }
];



for (let i=0; i < carts.length; i++) {
    carts[i].addEventListener('click', () => {
        cartNumbers(products[i]);
    })
}
function onLoadCartNumbers() {
    let productNumbers = localStorage.getItem('cartNumbers');

    if(productNumbers) {
        document.querySelector('.cart span').textContent = productNumbers;
    }
}
function cartNumbers(product) {
    
    let productNumbers = localStorage.getItem('cartNumbers');
    
    productNumbers = parseInt(productNumbers);
     
    if (productNumbers) {
        localStorage.setItem('cartNumbers', productNumbers + 1);
        document.querySelector('.cart span').textContent = productNumbers + 1;
    } else {
        localStorage.setItem('cartNumbers', 1);
        document.querySelector('.cart span').textContent = 1;
    }
    setItems(product);
     
 }

 function setItems(product) {
    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);
    console.log("My cartItems are", cartItems);
    
    if (cartItems !=null) {
        if (cartItems[product.tag] == undefined) {
            cartItems = {
                ...cartItems,
                [product.tag]: product
            }
        }

    

        cartItems[product.tag].inCart += 1;


    } else {
        product.inCart = 1;
        cartItems = {
            [product.tag]: product
        }


    
    
    }

    
    localStorage.setItem("productsInCart", JSON.stringify(cartItems));
 }
 onLoadCartNumbers();
<body>

    <div class="container">
        <div class="navbar">
            <div class="logo">
                <a href="#">MARCHÉ THAI</a>
            </div>
            <div class="navbar_items">
                <ul>
                    
                    <li><a href="{% url 'main_page-home'%}"><i class='fas fa-home'></i>Home</a></li>
                    <li><a href="#contact_us">Contact Us</a></li>
                    
                    <li class= "carts">
                        <a href="#"><i class='fa fa-shopping-cart'>
                        </i>Cart <span>0</span>
                        </a>
                    </li>
                    <li><a href="#">Check Out</a></li>
                </ul>
            </div>
            </div>
            <div class="container2">

                <div class="image">
                    <img src="{% static 'main_page/maincss/images/beans101.jpg' %}" width="200" height="200" alt="blah">
                    <h3>Beans</h3>
                    <h3>$2.55</h3>
                    <a class="add-cart cart1" href="#">Add Cart</a>
                    
                </div>
                
                <div class="image">
                    <img src="{% static 'main_page/maincss/images/beans102.jpg'%}"  width="200" height="200" alt="blah">
                    <h3>Beans</h3>
                    <h3>$2.55</h3>
                    <a class="add-cart cart2" href="#">Add Cart</a>
                    
                </div>   
                <div class="image">
                    <img src="{% static 'main_page/maincss/images/beans101.jpg' %}" width="200" height="200" alt="blah">
                    <h3>Beans</h3>
                    <h3>$2.55</h3>
                    <a class="add-cart cart3" href="#">Add Cart</a>
                   
                </div>   
                <div class="image">
                    <img src="{% static 'main_page/maincss/images/beans102.jpg'%}" width="200" height="200"
                    alt="blah">
                    <h3>Beans</h3>
                    <h3>$2.55</h3>
                    <a class="add-cart cart4" href="#">Add Cart</a>
                    
                </div>   
                <div class="image">
                    <img src="{% static 'main_page/maincss/images/beans101.jpg' %}" width="200" height="200"
                    alt="blah">
                    <h3>Beans</h3>
                    <h3>$2.55</h3>
                    <a class="add-cart cart5" href="#">Add Cart</a>
                   
                </div>  
            </div>
            
            </div>         
         

            
         

            
           
        <div class="footer">
            <a href="#">@ 2020 MARCHÉ THAI</a>
        </div>
    </div>


</body>

addEventListener不管用。错误说：

main2.js:1 未捕获的类型错误：无法在 main2.js:1 处读取 null 的属性“addEventListener”

JavaScript：

let carts = document.querySelectorAll('.add-cart');
    
let products = [
    {
        name:'Heinz Beanz',
        tag: 'heinzbeans',
        price: 2.55,
        inCart: 0
    },
    {
        name:'brown Beanz',
        tag: 'brownbeans',
        price: 2.55,
        inCart: 0
    },
    {
        name:'white Beanz',
        tag: 'whitebeans',
        price: 2.55,
        inCart: 0
    },
    {
        name:'black Beanz',
        tag: 'blackbeans',
        price: 2.55,
        inCart: 0
    },
    {
        name:'red Beanz',
        tag: 'redbeans',
        price: 2.55,
        inCart: 0
    }
];

for (let i=0; i < carts.length; i++) {
    carts[i].addEventListener('click', () => {
        cartNumbers(products[i]);
    })
}

我也试过：

document.getElementById("carts").addEventListener("click", () => {
  alert("You clicked?");
});

这也不起作用，我仍然收到错误消息。

未捕获的类型错误：无法在 main2.js:1 处读取 null 的属性“addEventListener”

标签： javascript

解决方案

问题可能出在您的第一行，请尝试在页面的控制台中运行它：

document.querySelectorAll('.add-cart')

你得到 null 还是一个元素数组？

如果您找不到合适的选择器来获取您的元素，请发布您的 html

推荐阅读