title: Check if element exists on click event
body: <p>How can I check an element if it is exists in the parent element? I'm implementing an increase/decrease button for product quantity in my project. I can increase and decrease the quantity when the user clicks those buttons. I have a _parentElement which I render an element and data and the error message (this will only render when there's an error). I've attached a click event to that _parentElement (this is visible in the DOM) and do event delegation.</p>
  <p>This error will only log when the error message is rendered in the _parentElement and when I click on the _parentElement.</p>
  <p><strong>Error</strong>: <code>Cannot read properties of null (reading 'innerHTML') at DetailView._handlerQuantity</code></p>
  <p>This what I did:</p>
  <p><strong>View.js</strong></p>
  <pre><code>import icons from 'url:../../icons/icons.svg';
  
  export default class View {
    _data;
    
    renderError(message = this._errorMessage) {
      const html = /*html*/ `
        &lt;div class=&quot;flex flex-col items-center justify-center gap-4 min-h-[inherit]&quot;&gt;
          &lt;svg class=&quot;h-6 w-6 sm:h-10 sm:w-10 fill-red-600&quot;&gt;
            &lt;use xlink:href=&quot;${icons}#icon-warning&quot;&gt;&lt;/use&gt;
          &lt;/svg&gt;
          &lt;span class=&quot;text-xl text-neutral-600 font-medium sm:text-xl xs:text-lg&quot;&gt;${message}&lt;/span&gt;
        &lt;/div&gt;
      `;
  
      const markup = this._parseStringtoHTML(html);
      this._parentElement.innerHTML = '';
      this._parentElement.insertAdjacentElement('afterbegin', markup.body.firstElementChild);
    }
  }
  </code></pre>
  <p><strong>DetailView.js</strong></p>
  <pre><code>class DetailView extends View {
    _parentElement = document.querySelector(&quot;.product__details&quot;);
    _errorMessage = &quot;We could'nt find the product. Please try another one!&quot;;
  
    constructor() {
      super();
      this._addHandlerProductQuanity();
    }
  
    _handlerQuantity(e) {
      const increase = e.target.closest(&quot;.btn__control--add&quot;);
      const decrease = e.target.closest(&quot;.btn__control--minus&quot;);
      let quantity = document.querySelector(&quot;.product__quantity&quot;);
      const currentValue = Number(quantity.innerHTML) || 0;
  
      if (increase)
        Number(quantity.innerHTML) &lt; this._data.stocks
          ? (quantity.innerHTML = currentValue + 1)
          : 1;
  
      if (decrease)
        Number(quantity.innerHTML &gt; 1)
          ? (quantity.innerHTML = currentValue - 1)
          : 1;
    }
  
    _addHandlerProductQuanity() {
      this._parentElement.addEventListener(
        &quot;click&quot;,
        this._handlerQuantity.bind(this)
      );
    }
  }
  </code></pre>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;main class=&quot;main min-h-[calc(100vh-5rem)] sm:min-h-[calc(100vh-8rem)]&quot;&gt;
    &lt;section class=&quot;product__details min-h-[inherit]&quot;&gt;
      &lt;!-- PRODUCTS DETAILS WILL GO HERE... --&gt;
    &lt;/section&gt;
  &lt;/main&gt;
  </code></pre>