выполнить функцию после того, как 2 другие функции вернут желаемый ответ vanilla js - PullRequest
Новая
       50

выполнить функцию после того, как 2 другие функции вернут желаемый ответ vanilla js

0 голосов
/ 15 апреля 2020

У меня есть проект, который содержит форму из двух ячеек: одна - текст, а другая - дата. У меня есть 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');
    }
  });
}

Как я могу это сделать?

1 Ответ

0 голосов
/ 15 апреля 2020

Вам необходимо вернуть логическое значение из экспортируемых функций. Вам не нужен обработчик кликов для каждой функции. Последняя функция 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

Вот фрагмент кода, который может вам помочь. 

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>
...