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

Nederlands Discussies Technische Q&A

Topic summary

A developer is encountering a JavaScript error when trying to implement a domain name checker form on a Shopify page. The error “Cannot read properties of null (reading ‘addEventListener’)” appears in the console, preventing the script from executing.

Key Details:

  • The HTML includes a form with ID ‘domainCheck’ for custom domain input
  • JavaScript attempts to attach an event listener to check domain availability via API
  • The code works correctly when loaded as a standalone HTML file in the browser
  • The issue only occurs within the Shopify environment

Technical Context:
The script makes a POST request to an API endpoint to verify if a domain name is available, then enables/disables an “Add to Cart” button based on the response.

Current Status:
The discussion remains open with no solution provided yet. The error suggests the script may be executing before the DOM element ‘domainCheck’ is fully loaded in Shopify’s rendering environment.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hello there,

My script is not executing in the console when loading my page in Shopify.

Schermafbeelding 2023-03-10 om 23.49.56.png

This is the HTML

     <div class="formdomain">
         <form action="" method="post" id="domainCheck">
    <h3 style="font-size: 21px; color: black;">Kies je eigen domeinnaam</h3>
    <p style="margin-top: 5px; color: #666666;">Vul de door jouw gekozen domeinnaam hieronder in, deze wordt bevestigd zodra je een product aan je winkelmandje toevoegt.</p>
    <div style="margin-top:15px;">
    <form id="form" method="POST">
    <p class="line-item-property__field">
    <div class="input-wrapper">
    <input id="custom-text" type="text" name="customUrl" placeholder="Domeinnaam">
    <p style="font-weight:600; display:block; margin-top:15px;">example.app/domeinnaam</p>
    </div>
    <button id="AddButtonAPI" disabled>Toevoegen aan winkelwagen</button>
  </form>
  </div>
    <span id="domainAvailable">Typ een domeinnaam in om de beschikbaarheid te testen</span>
          </div>

This is the Javascript

const domainForm = document.getElementById('domainCheck');
      async function checkDomain(customUrl) {
      const formData = new FormData(domainForm)
      var appDomain = document.getElementById("domainAvailable");
      const response = await fetch( "https://example/api/checkCustomUrl", {
        method: 'POST',
        body: JSON.stringify({ customUrl: customUrl }),
        headers: {
          'Content-type': 'application/json',
          'Accept': 'application/json',
        }
      });
      return response.json();
      }
  let person = {
    exists: 'true',
    exists: 'false'
  };
    domainForm.addEventListener('change', (e) => {
      checkDomain(e.target.value)
      .then((response) => {
        if(response.exists == 'true'){
            console.log(response);
            document.getElementById("domainAvailable").innerHTML = "Domain is not free";
            document.getElementById("AddButtonAPI").disabled = true;
        } else if(response.exists == 'false'){
            console.log(response);
            document.getElementById("domainAvailable").innerHTML = "Domain is free";
            document.getElementById("AddButtonAPI").disabled = false;
        }
      })
    });

Does anyone knows why the script is not executing?

If i load the html file in my browser it works fine, in Shopify the console error keeps popping up and the function is not working.

Thanks alot!