Function wont find element from innerHTML

im doing a project on school, where we are making a website, and modularity was very important. therefore i put the header in innerHTML since it was going to be used on every page. i have a counter which use an element in that innerHTML, but when i call the counter it just says "Cannot set property of innerHTML of null. I've searched for hours but it dont seem to be any other who have had this exact problem.

The counter worked perfectly until i put the html in innerHTML.. I've laso tried to put the script both just under the header which the innerHTML is for, AND at the bottom, and under the body end-tag. all with the same result.

Here's the code for html and javascript. i've only taken with the lines that is used for this.

loadTop();
function loadTop() {
   document.getElementById("header").innerHTML = 
   '<div class="topbar">'+
       '<div class="cart">'+
           '<output type="number" id="orderCount">0</output>'
       '</div>'+
   '</div>';

  
}
       
window.onload = loadTop;
       
const cartNow = document.getElementById("orderCount");
let cartNum = 0;
 function cartCounter() {
    cartNum += 1;
    cartNow.innerHTML = cartNum;
    cartNow.style.opacity = 1;
    console.log(cartNow);
 }
<body>
        <header id="header"></header>
        <script src="script.js"></script>
        <button id="oatmeal" onclick="cartCounter()"> + </button>
</body>

3 answers

  • answered 2020-10-28 22:32 A.DUPONCHEL

    Please ensure loadTop() has been called before assigning cartNow. Else cartNow will be null.

    const cartNow = document.getElementById("orderCount")
    

    EDIT : I think you should not use onload for loading your page as onload has be thought to be call after the page is "loaded". Instead I recommand you to call your loadTop before closing your body. Then use onload event to register your events. I am not a frontend optimisation expert so maybe there are more elegant/performant solutions but it should be enought for you school project anyway.

    document.addEventListener("DOMContentLoaded", () => {
        const cartNow = document.getElementById("orderCount");
        let cartNum = 0;
        document.getElementById('oatmeal').addEventListener('click',  function cartCounter() {
            cartNum += 1;
            cartNow.innerHTML = cartNum;
            cartNow.style.opacity = 1;
            console.log(cartNow);
         });
    }); 
    
    
    <body>
        <header id="header"></header>
        <script src="script.js"></script>
        <button id="oatmeal"> + </button>
        <script>
            (function() {
               document.getElementById("header").innerHTML = 
               '<div class="topbar">'+
                   '<div class="cart">'+
                       '<output type="number" id="orderCount">0</output>'
                   '</div>'+
               '</div>'
            })();
        </script>
    </body>
    

  • answered 2020-10-28 22:48 Fernando Valderrama Guayán

    You must call the JavaScript function at the beginning of your .js file, like this:

    loadTop();
    
    function loadTop() {
        document.getElementById("header").innerHTML =
            '<div class="topbar">' +
            '<div id="overskrift"><a href="index.html">ELEMENT</a></div>' +
    
            '<!--STJERNE-->' +
            '<div class="cart">' +
            '<output type="number" id="orderCount">0</output>'
    }
    
    const cartNow = document.getElementById("orderCount");
    let cartNum = 0;
    function cartCounter() {
        cartNum += 1;
        cartNow.innerHTML = cartNum;
        cartNow.style.opacity = 1;
        console.log(cartNow);
    }
    

    enter image description here

  • answered 2020-10-28 23:22 rubarn

    Everything worked out now. thank you both so much. I thought i had to use window.onload for some reason i got somewehere on the web, but i removed that, and put just loadTop() at the top, and it was all fixed! finally, Good night!