Блог

У меня есть ряд функций, которые все связаны вместе как часть приложения для калькулятора.

Существует кнопка типа «Отправить» с функцией click EventListener() и функцией anon, которая выполняет две функции.

Первая функция в EventListener ()-это функция вызова API, которая извлекает данные и изменяет входные значения формы в зависимости от правильно нажатой кнопки. Предполагаемая цель здесь состоит в том, чтобы следующая функция в EventListener (), которая является функцией вычисления зонтика, затем вычисляла с использованием новых входных значений, вызванных функцией API, и отображала это в поле сводки.

Теперь код работает, но только когда я дважды нажимаю на кнопку. Первый щелчок вызовет API, а затем я должен снова нажать кнопку, чтобы изменить значения в поле сводка. Я не уверен, почему они не выполняются асинхронно.

Стоит отметить, что функции окна сводки расчетов также могут быть вызваны функцией ввода входных значений, т. е. пользователем, вводящим данные вручную. Это не проблема, но мне действительно нужно, чтобы эти нажатия на кнопки вели себя одинаково.

 // THIS IS THE SUMMARY BOX FUNCTION WHICH HOUSES ALL THE CALCULATION FUNCTIONS. A,B,C ETC. REPRESENTS A lt;Pgt; HTML ELEMENT IN THE SUMMARY BOX.  const valuesToChange = () =gt; {  a.innerText = `£${calculationFunctionA()}`;  b.innerText = `${calculationFunctionB()} BTC`;  c.innerText = `£${calculationFunctionC()}`;  d.innerText = `£${calculationFunctionD()}`;  e.innerText = `£${calculationFunctionE()}`;  };   // THESE ARE THE FORM INPUT VALUES. WHEN USER MANUALLY ENTERS INPUT, THE CALCULATION FUNCTION IS TRIGGERED VIA KEYUP EVENTLISTENER.   const innerElementsArr = [formInput, formInput1, formInput2];  innerElementsArr.forEach(item =gt; {  item.addEventListener('keyup', function() {  valuesToChange();  });  });   // API CALL FUNCTION THAT REPLACES THE FORM INPUT VALUES WITH THE JSON DATA.   const getValues = APIIndex =gt;  fetch('https://api.com')  .then(response =gt; response.json())  .then(  json =gt;  (formInput.value = `${parseFloat(json.prop[APIIndex].price).toFixed(  2  )}`)  )  .catch(error =gt; console.log('Error'));   // SUBMIT BUTTON THAT CALLS BOTH FUNCTIONS ABOVE.   mySubmit.addEventListener('click', () =gt; {  getValues(0);  valuesToChange();  });  

Событие click запускает обе функции синхронно и не ожидает ответа на вызов api. вы должны вызвать вторую функцию изнутри then , вот так.

 const getValues = APIIndex =gt;  fetch('https://api.com')  .then(response =gt; response.json())  .then(  json =gt;  (formInput.value = `${parseFloat(json.prop[APIIndex].price).toFixed(  2  )}`)  valuesToChange(); //call the second function  )  .catch(error =gt; console.log('Error'));   // SUBMIT BUTTON THAT CALLS BOTH FUNCTIONS ABOVE.   mySubmit.addEventListener('click', () =gt; {  getValues(0); //call the first function  });