Cannot set property 'textContent' of null?

Question

Heyo, I've been building a cart system tonight for my college class project this semester, like a website connected to a database that logs orders and such. I've been getting this weird error from chrome when I try to console.log, and it is confusing me because I'm not sure what the issue could be. It seems to be coming from this function,

function onLoadCartNumbers() {
    let productNumbers = localStorage.getItem('cartNumbers');

    if(productNumbers) {
        document.querySelector('.cart h3').textContent = productNumbers;
    }
}

but here's the rest of my JS in codepen for reference because my js doesn't want to paste correctly here for whatever reason, I get that it sounds sketch but I can't do much about it myself

https://codepen.io/surrealthecoder/pen/RwaqaVo

and this is my html pen which this js file is linked to

https://codepen.io/surrealthecoder/pen/abNQNxd

Not solved anymore, when that string of document.querySelector('.cart h3').textContent = productNumbers; is deleted, and I add an item to the cart, the carts interface then dissappears and im left with a white screen

the ('.cart h3') is supposed to grab the class and h3 element in

<li class="cart">
  <a href="cart.html">
    <h3>Cart</h3>
  </a>
</li>

Which is the button to link the user to the cart interface

And theoretically it should, but i returns the error written in the title only in chrome console, nowhere in VSCode does the IDE recognize it as a null error

the entire error is

products.js:50 Uncaught TypeError: Cannot set property 'textContent' of null
at onLoadCartNumbers (products.js:50)
at products.js:123

line 123 is

onLoadCartNumbers();

this message mean that `document.querySelector('.cart h3')` doesn't find anything. — Mister Jojo, Sep 21 '20 at 01:42
Yeah, turns out document.querySelector('.cart h3') doesnt return, in turn it was called null, leading to the error — Surreal, Sep 21 '20 at 01:55
my question now, is why when I delete document.querySelector('.cart h3').textContent = productNumbers;, why it deletes my carts interface — Surreal, Sep 21 '20 at 02:20
........thats because this is my javascript, linked to my html via a script tag. https://codepen.io/surrealthecoder/pen/abNQNxd this is my HTML its referring to, ive already updated the page with more info. — Surreal, Sep 21 '20 at 02:33
keep it simple and read carefully: https://stackoverflow.com/help/minimal-reproducible-example then open a new question on your specific problem, not about understanding an error message — Mister Jojo, Sep 21 '20 at 02:45
and don't forget to use https://validator.w3.org/#validate_by_input **before** — Mister Jojo, Sep 21 '20 at 03:00

Cannot set property 'textContent' of null?

0 Answers0