title: TypeError: Cannot read properties of null (reading 'addEventListener') javascript
body: <p>I am trying to add a button but it is showing me this error.
  here is my html code</p>
  <pre><code>&lt;div card-container&gt;
          &lt;template class=&quot;mainTemplate&quot;&gt;
              &lt;div class=&quot;cards&quot;&gt;
                  &lt;div class=&quot;card&quot;&gt;
                      &lt;img data-image src=&quot;&quot; alt=&quot;&quot;&gt;
                      &lt;div data-title class=&quot;header&quot;&gt;&lt;/div&gt;
                      &lt;div data-body class=&quot;body&quot;&gt;&lt;/div&gt;
                      &lt;button data-button class=&quot;btn&quot;&gt;read more&lt;/button&gt;
                      &lt;p data-paragraph class=&quot;fullText&quot;&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  
  
              &lt;/div&gt;
          &lt;/template&gt;
      &lt;/div&gt;
  </code></pre>
  <p>here is the javascript code</p>
  <pre><code>  let showDitail = document.querySelector(&quot;.btn&quot;);
  showDitail.addEventListener(&quot;click&quot;, showMore);
  
  
  function showMore(){
      alert(&quot;e&quot;)
  }
  </code></pre>