How to call async function inside a onClick (Button Click)

I am new to javascript and I am trying to create the following:

I have a search form for flights and after a user clicks Search, the user immediately gets the results.

I want to change this process.
When a user fills the search form and clicks Search I want a POPUP screen to show with the Terms and conditions with a button “I understand”. The results of the search will be shown only if the user clicks the button “I understand” in the POPUP.

I am trying to use await and async but I have no success still..

Here is the main code:

export function initSearchButtonOnClick() {
  $("#search-button").on("click", function (e) {
    activateLoadingOverlay2() // POPUP window Tearms & Condition


    // the code down needs to happen only after the user click the button "I understand" in the POPUP window.
    console.log("blerdii");

    e.preventDefault();
    switch (flightType) {
      case "rt":
      case "ow":
        if (
          $("#from-destination")[0].reportValidity() &&
          $("#to-destination")[0].reportValidity()
        ) {
          const fromDestination = $("#from-destination")
            .val() 
    More code below

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

javascript is asynchrone and mono-thread. Forget about await and async.

From your popup HTML template, you have to bind a function when the user click on the button “I understand”. That all.

Your function activateLoadingOverlay2() should register an event listener of the “I understand” button to do what you want.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0