在 2 个其他函数 returns 所需的响应 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

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

编辑：如果分成模块，则需要 export 功能。请检查代码框 link.

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

下面是可能对您有帮助的片段。

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>

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

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

javascript

execute

pure-js