Vuejs : Uncaught (in promise) TypeError: can't access property "addEventListener", dateOfEntrance is null

I have a form with a two dates (Entry and Exit). I would like to compare the two dates and make sure that the release date is before the exit date. Unfortunately, I get a Uncaught (in promise) TypeError: can't access property "addEventListener", dateOfEntrance is null error. This is my javascript code (Vuejs 3 Api composition)

<script>
// Dates Management
const dateOfEntrance = document.getElementById("date_of_entrance");
const dateOfRelease = document.getElementById("date_of_release");
const dateError = document.getElementById("date-error");

const submitButton = document.getElementById("submit");

const compare = () => {
  const startDate = new Date(dateOfEntrance.value).getTime();
  const endDate = new Date(dateOfRelease.value).getTime();

  if (endDate < startDate) {
    dateError.classList.remove("hidden");
    submitButton.disabled = true;
  } else {
    dateError.classList.add("hidden");
    submitButton.disabled = false;
  }
};

dateOfEntrance.addEventListener("change", compare);
dateOfRelease.addEventListener("change", compare);

</script>

and the html code

          <CardBox>
            <FormField label="Entry date & Release date">
              <FormControl
                id="date_of_entrance"
                v-model="form.date_of_entrance"
                name="date_of_entrance"
                :icon="mdiCalendarPlus"
                type="date"
                placeholder="Date of entrance"
                required
              />
              <FormControl
                id="date_of_release"
                v-model="form.date_of_release"
                name="date_of_release"
                :icon="mdiCalendarPlus"
                type="date"
                placeholder="Date of release"
                required
              />
            </FormField>

            <div
              id="date-error"
              class="hidden italic mt-2 text-red-800 text-xs"
            >
              <p>The release date must be before the entry date.</p>
            </div>
            </template>
          </CardBox>

Thank you in advance for your help.

LaryAI

3 years ago

Level 58

The error message "can't access property 'addEventListener', dateOfEntrance is null" indicates that the element with the ID "date_of_entrance" is not found in the DOM. This is likely because the script is executed before the HTML is fully loaded.

To fix this, you can wrap the script in a DOMContentLoaded event listener, which ensures that the script is executed only after the HTML is fully loaded:

document.addEventListener('DOMContentLoaded', () => {
  // Dates Management
  const dateOfEntrance = document.getElementById("date_of_entrance");
  const dateOfRelease = document.getElementById("date_of_release");
  const dateError = document.getElementById("date-error");

  const submitButton = document.getElementById("submit");

  const compare = () => {
    const startDate = new Date(dateOfEntrance.value).getTime();
    const endDate = new Date(dateOfRelease.value).getTime();

    if (endDate < startDate) {
      dateError.classList.remove("hidden");
      submitButton.disabled = true;
    } else {
      dateError.classList.add("hidden");
      submitButton.disabled = false;
    }
  };

  dateOfEntrance.addEventListener("change", compare);
  dateOfRelease.addEventListener("change", compare);
});

Rod2rick

3 years ago

Level 1

@LaryAI Thank you for your reply. Unfortunately, it does not allow me to compare the two dates. I tested the coe on a simple javascript html page and it works perfectly, but when I use it in vuejs the code doesn't work? Does anyone have a better solution for me please ?

Rod2rick

3 years ago

Best Answer

Level 1

I found the solution, instead of using jS raw in vuejs, i create a full functionto manage the date error. So here the function

const startDateIsBeforeEndDate = computed(() => {
  const startDate = new Date(form.date_of_entrance).getTime();
  const endDate = new Date(form.date_of_release).getTime();
  return startDate <= endDate 
})

and the In my template:

<div
  v-if="!startDateIsBeforeEndDate"
  class="italic mt-2 text-red-800 text-xs"
>
  <p>The release date must be before the entry date.</p>
</div>

It works very well.

Thank for your help.

Please or to participate in this conversation.