execute a function after 2 other functions returns a desired response vanilla js

Question

I have a project which contains a form of two cells one is a text and another is a date. I have 2 JS files that validate each cell I want if the text field and date field have a correct inputs to execute the new function. and if not show alert messages I coded in other JS files I tried a lot but I can't figure what is the problem?

the first JS file

export function daysRemaining() {
  document.getElementById('search').addEventListener('click', (event) => {
    event.preventDefault();
    //console.log("I'm there from search form");
    const today = new Date(); //today date
    const tripDate = new Date(document.getElementById('date').value); //trip date entered by user
    if (tripDate > today) {
      console.log(
        Math.ceil(Math.abs(tripDate - today) / (1000 * 60 * 60 * 24))
      );
    }
  });
}

the second file

export function checkDestinationAndDate() {
  document.getElementById('search').addEventListener('click', (event) => {
    event.preventDefault();
    const destination = document.querySelector('#destination').value;
    const tripDate = new Date(document.getElementById('date').value);
    if (!destination && !Date.parse(tripDate)) {
      alert('Enter a destination and a date');
    } else if (destination && !Date.parse(tripDate)) {
      alert("You didn't choose a date");
    } else if (!destination && Date.parse(tripDate)) {
      alert("You didn't choose a destination");
    } else if (destination && Date.parse(tripDate) < new Date()) {
      alert('Please pick a future date');
    } else {
      console.log(destination);
    }
  });
}

*the third JS file and what I want to edit *

import { daysRemaining } from './days_countdown';
import { checkDestinationAndDate } from './destination_date';

export function main() {

  document.getElementById('search').addEventListener('click', (event) => {
    event.preventDefault();

    if (daysRemaining === true && checkDestinationAndDate === true) {
      console.log('good work');
    } else {
      console.log('Failed');
    }
  });
}

How can I do this?

Answer 1

You need to return boolean value from the exported functions. You don't need click handler for each function. The final function main() can listen for click event.

EDIT: you need to export functions if separated into modules. Please check the codesandbox link.

https://codesandbox.io/s/stackoverflow-answer-execute-a-function-after-2-other-functions-returns-a-desired-response-vanilla-js-rcze7?file=/src/index.js

Here is the snippet that might help you.

function daysRemaining() {
  //console.log("I'm there from search form");
  const today = new Date(); //today date
  const tripDate = new Date(document.getElementById('date').value); //trip date entered by user
  if (tripDate > today) {
    const isRemaining = Math.ceil(Math.abs(tripDate - today) / (1000 * 60 * 60 * 24))
    console.log(isRemaining);

    return !!isRemaining
  }

  return false;
}

function checkDestinationAndDate() {
  const destination = document.querySelector('#destination').value;
  const tripDate = new Date(document.getElementById('date').value);
  let returnValue = false;

  if (!destination && !Date.parse(tripDate)) {
    alert('Enter a destination and a date');
  } else if (destination && !Date.parse(tripDate)) {
    alert("You didn't choose a date");
  } else if (!destination && Date.parse(tripDate)) {
    alert("You didn't choose a destination");
  } else if (destination && Date.parse(tripDate) < new Date()) {
    alert('Please pick a future date');
  } else {
    returnValue = true;
    console.log(destination);
  }

  return returnValue;
}

// import { daysRemaining } from './days_countdown';
// import { checkDestinationAndDate } from './destination_date';

function main() {

  document.getElementById('search').addEventListener('click', (event) => {
    event.preventDefault();

    if (checkDestinationAndDate() && daysRemaining()) {
      console.log('good work');
    } else {
      console.log('Failed');
    }
  });
}

main()

<input type="date" id="date" />
<input type="text" id="destination" />

<button type="button" id="search">Search</button>