?page=2:140 Uncaught TypeError: Cannot read property 'innerHTML' of null at DisplayCart (?page=2:140) at ?page=2:133. Can't find the mistake

Hi fellows i am stuck getting this error.
This is the html code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{% static 'shop/style.css' %}">
    <title>Document</title>
</head>
<body>
    <div class="container"> 
        <div class="row">
            <div class="col-md-12">
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNavDropdown">
                      <ul class="navbar-nav">
                        <li class="nav-item active">
                          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <button id="cart"  data-html="true" type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
                            sagittis lacus vel augue laoreet rutrum faucibus.">
                              Cart(0)
                            </button>
                        </li>
                        <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown link
                          </a>
                          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </nav>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <form class="card card-sm"> 
                    <div class="card-body row no-gutters align-items-center"> 
                        <div class="col">
                            <input type='search' name='item_name' placeholder="Search for products" class="form-control form-control-borderless">
                        </div>
                        <div class="col-auto"> 
                            <button class="btn btn-success" type="submit">Search</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            {% for product in product_objects %} 
            <div class="col-md-3"> 
                <div class="card"> 
                    <img src="{{ product.image }}" class="card-img-top"> 
                    <div class="card-body">
                        <div id="nm{{product.id}}"class="card-title"> 
                            {{ product.title }}
                        </div>
                        <div class="card-text"> 
                            {{ product.price }}
                        </div> 
                        <a href="/{{product.id}}" class="btn btn-warning">View</a> 
                        <button id="{{product.id}}" class="btn atc btn-warning">Add to cart</button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="row"> 
             <div class="col-md-3 offset-md-4"> 
                 <ul class="pagination"> 
                     {% if product_objects.has_previous %}
                      <li class="page-item">
                          <a class="page-link" href="?page={{ product_objects.previous_page_number }}">Previous</a>
                      </li>
                     {% endif %}
                     <li class="page-item active">
                        <a class="page-link"  href="?page={{ product_objects.number }}">Current</a>
                    </li>

                     {% if product_objects.has_next %} 
                     <li class="page-item">
                        <a class="page-link" href="?page={{ product_objects.next_page_number }}">Next</a>
                    </li>
                     {% endif %}
                 </ul>
             </div>
        </div>
   
    </div>
</body>  

and javascripit. It is bellow the bodytag.

<script type="text/javascript"> 
   if(localStorage.getItem('cart') == null){ 
       var cart={};
   } 
   else{ 
       cart = JSON.parse(localStorage.getItem('cart'))
   }  

   $(document).on('click', '.atc', function(){ 
       console.log("add to the card")  
       var item_id = this.id.toString(); 
       console.log(item_id); 

       if(cart[item_id]!= undefined){
          cart[item_id] = cart[item_id] + 1 
       } else{ 
           cart[item_id] = 1;
       } 
       console.log(cart); 
       localStorage.setItem('cart', JSON.stringify(cart)); 
       document.getElementById("cart").innerHTML ="Cart(" + Object.keys(cart).length +")";
   

   }); 
 

   DisplayCart(cart);
   function DisplayCart(cart){ 
       var cartString = ""; 
       cartString += "<h5>This is your cart</h5>";
       var cartIndex = 1;
       for(var x in cart){ 
           cartString += cartIndex;
           cartString += document.getElementById("nm"+x).innerHTML + "Qty:" + cart[x] + "</br>";
           cartIndex +=1;
       } 
       cartString +="<a href='/checkout'><button class='btn btn-warning' id='checkout'>Checkout</button></a>";
       document.getElementById("cart").setAttribute('data-content',cartString);
       $('[data-toggle="popover"]').popover();

   }    
</script>

The error is telling you that inside DisplayCart you have a call to innerHTML on a selector that is returning null.

I understand it but can not come with a solution about it.

I’m guessing the template language is liquid?

Maybe try wrapping the JS inside a on ready function so you are sure the DOM is ready before accessing it. I guess you may also have to check cart in localStorage actually contains what you are expecting for the for...in loop.