title: I am getting Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
body: <p>I am building an e-com site using the Django framework. to make it more efficient I am using javascript here and there. So the problem occurs at the checkout page and specifically if a user is logged in. On my site, a user can shop even if he is not logged in as a guest user. so if a guest user is going to the checkout page he can submit the process and make payment without running into any issues. But when a user is logged in the checkout page returns the error on load! even before writing anything into the form. I am attaching the checkout page code here for you guys to give it a good look. I have tried to debug it as well as run into the built-in code snippets here. It works fine without any issues</p>
  <pre><code>{% extends 'store/main.html' %}
  {% load static %}
  {% block content %}
  
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg-6&quot;&gt;
          &lt;div class=&quot;box-element&quot; id=&quot;form-wrapper&quot;&gt;
              &lt;form id=&quot;form&quot;&gt;
                  &lt;div id=&quot;user-info&quot;&gt;
                      &lt;div class=&quot;form-field&quot;&gt;
                          &lt;input required class=&quot;Form-control&quot; type=&quot;text&quot; name=&quot;name&quot; placeholder=&quot;Name&quot;&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-field&quot;&gt;
                          &lt;input required class=&quot;Form-control&quot; type=&quot;email&quot; name=&quot;email&quot; placeholder=&quot;Email&quot;&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id=&quot;shipping-info&quot;&gt;
                      &lt;hr&gt;
                      &lt;p&gt;shipping-info&lt;/p&gt;
                      &lt;hr&gt;
                      &lt;div class=&quot;form-field&quot;&gt;
                          &lt;input required class=&quot;Form-control&quot; type=&quot;text&quot; name=&quot;address&quot; placeholder=&quot;Street&quot;&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-field&quot;&gt;
                          &lt;input required class=&quot;Form-control&quot; type=&quot;text&quot; name=&quot;city&quot; placeholder=&quot;City&quot;&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-field&quot;&gt;
                          &lt;input required class=&quot;Form-control&quot; type=&quot;text&quot; name=&quot;state&quot; placeholder=&quot;State&quot;&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-field&quot;&gt;
                          &lt;input required class=&quot;Form-control&quot; type=&quot;text&quot; name=&quot;zipcode&quot; placeholder=&quot;Zip Code&quot;&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;hr&gt;
                  &lt;div class=&quot;d-grid gap-2&quot;&gt;
                      &lt;input id=&quot;form-button&quot; class=&quot;btn btn-outline-info&quot; type=&quot;submit&quot; value=&quot;Continue&quot;&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;br&gt;
  
          &lt;div class=&quot;col-lg-6&quot;&gt;
              &lt;div class=&quot;box-element hidden&quot; id=&quot;payment-info&quot;&gt;
                  &lt;small&gt;Paypal&lt;/small&gt;
                  &lt;button id=&quot;make-payment&quot;&gt;Make Payment&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;col-lg-6&quot;&gt;
          &lt;div class=&quot;box-element&quot;&gt;
              &lt;a class=&quot;btn btn-outline-primary&quot; href=&quot;{% url 'cart' %}&quot;&gt;&amp;#x2190;Back to Cart&lt;/a&gt;
              &lt;hr&gt;
              &lt;h3&gt;Order Summary&lt;/h3&gt;
              &lt;hr&gt;
              {% for item in items %}
              &lt;div class=&quot;cart-row&quot;&gt;
                  &lt;div style=&quot;flex: 2;&quot;&gt;&lt;img class=&quot;row-image&quot; src=&quot;{{item.product.imageURL}}&quot;&gt;&lt;/div&gt;
                  &lt;div style=&quot;flex: 2;&quot;&gt;{{item.product.name}}&lt;/div&gt;
                  &lt;div style=&quot;flex: 1;&quot;&gt;${{item.product.price|floatformat:2}}&lt;/div&gt;
                  &lt;div style=&quot;flex: 1;&quot;&gt;
                      &lt;p&gt;&lt;strong&gt;x{{item.quantity}}&lt;/strong&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              {% endfor %}
              &lt;h5&gt;Items: {{order.get_cart_items}}&lt;/h5&gt;
              &lt;h5&gt;Total: ${{order.get_cart_total|floatformat:2}}&lt;/h5&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
      var shipping = '{{order.shipping}}'
      var total = '{{order.get_cart_total|floatformat:2}}'
  
      if (shipping == 'False') {
          document.getElementById('shipping-info').innerHTML = ''
      }
  
      var form = document.getElementById('form');
      form.addEventListener('submit', function (e) {
          e.preventDefault()
          console.log('form submitted...')
          document.getElementById('form-button').classList.add('hidden')
          document.getElementById('payment-info').classList.remove('hidden')
      })
  
      document.getElementById('make-payment').addEventListener('click', function (e) {
          submitFormData()
      })
  
  
      function submitFormData() {
          console.log('Payment button clicked')
          var userFormData = {
              'name': null,
              'email': null,
              'total': total,
          }
  
          var shippingInfo = {
              'address': null,
              'city': null,
              'state': null,
              'zipcode': null,
          }
  
          if (shipping != 'False') {
              shippingInfo.address = form.address.value
              shippingInfo.city = form.city.value
              shippingInfo.state = form.state.value
              shippingInfo.zipcode = form.zipcode.value
          }
  
          if (user == 'AnonymousUser') {
              userFormData.name = form.name.value
              userFormData.email = form.email.value
          }
  
          var url = '/process_order/'
          fetch(url, {
                  method: 'POST',
                  headers: {
                      'Content-Type': 'application/json',
                      'X-CSRFToken': csrftoken,
                  },
                  body: JSON.stringify({
                      'form': userFormData,
                      'shipping': shippingInfo
                  })
              })
  
              .then((response) =&gt; response.json())
              .then((data) =&gt; {
                  console.log('Success:', data);
                  alert('Transaction Completed!');
  
                  cart = {}
                  document.cookie = 'cart=' + JSON.stringify(cart) + &quot;;domain=;path=/&quot;
                  window.location.href = &quot;{% url 'store' %}&quot;
  
              })
      }
  &lt;/script&gt;
  
  {% endblock content %}
  </code></pre>