在其他 2 个函数返回所需的响应 vanilla js 之后执行一个函数

Question

我有一个项目，其中包含两个单元格的形式，一个是文本，另一个是日期。 我有 2 个 JS 文件来验证每个单元格 我想要文本字段和日期字段是否有正确的输入来执行新功能。如果不显示我在其他 JS 文件中编码的警报消息 我尝试了很多，但我无法弄清楚问题是什么？

第一个 JS 文件

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))
      );
    }
  });
}

第二个文件

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);
    }
  });
}

*第三个JS文件和我要编辑的内容*

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');
    }
  });
}

我该怎么做？

Answer 1

您需要从导出的函数中返回布尔值。您不需要每个功能的点击处理程序。最终函数main()可以监听点击事件。

编辑：如果分成模块，您需要 export 函数。请检查代码框链接。

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

这里是可能对您有所帮助的 sn-p。

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>