TypeError: Cannot read properties of null (reading 'addEventListener') javascript

Question

I am trying to add a button but it is showing me this error. here is my html code

<div card-container>
        <template class="mainTemplate">
            <div class="cards">
                <div class="card">
                    <img data-image src="" alt="">
                    <div data-title class="header"></div>
                    <div data-body class="body"></div>
                    <button data-button class="btn">read more</button>
                    <p data-paragraph class="fullText"></p>
                </div>
                

            </div>
        </template>
    </div>

here is the javascript code

  let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);


function showMore(){
    alert("e")
}

Answer 1

You're using the <template> tag, which is an element that holds html markup but it's not rendered on page load. In order to render its contents, one has to handle the <template> element via javascript, using the html structure as - in fact - a template for filling another structure (a table, a divs grid, etc.).

Since the sub-elements of <template> are not part of the DOM yet, let showDitail = document.querySelector(".btn"); will result in null. That's why you cannot bind events to it.

Either change the tag to something else (a div maybe), or handle the template properly via javascript.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);


function showMore(){
    alert("e")
}

<div card-container>
    <div class="mainTemplate">
        <div class="cards">
            <div class="card">
                <img data-image src="" alt="">
                <div data-title class="header"></div>
                <div data-body class="body"></div>
                <button data-button class="btn">read more</button>
                <p data-paragraph class="fullText"></p>
            </div>
        </div>
    </div>
</div>