One getElementById does not work although the others do, everything is spelled correctly and the syntax is correct. testTitle does not return anything in the console although the others do, I have tried rearranging the lines however it results in the same thing.

      <!--test name-->
      <div class="row">
        <div class="col s6 offset-s3">
          <div class="input-field">
            <input type="text" id="testTitle" required />
            <label for="testTitle">test name</label>
          </div>
        </div>
      </div>
      <!--subject-->
      <div class="row">
        <div class="col s6 offset-s3">
          <div class="input-field">
            <input type="text" id="testSubject" required />
            <label for="testSubject">subject</label>
          </div>
        </div>
      </div>
      <!--test date-->
      <div class="row">
        <div class="col s6 offset-s3">
          <div class="input-field">
            <input type="text" class = "datepicker" id="testDate" required />
            <label for="testDate">test date</label>
          </div>
        </div>
      </div>

    add.addEventListener('click', async (e) => {
      
      const testSubject = document.getElementById("testSubject").value;
      const testDate = document.getElementById("testDate").value;
      const testTitle = document.getElementById("testTitle").value;
      console.log(testTitle);
      console.log(testSubject);
      console.log(testDate);
    });