How to use async/await on event handlers on buttons in JavaScript?

Question

I'm new too JavaScript and am having trouble with async. I have a webpage with two buttons, If the yes button is pressed it will do some code and if the no button is pressed it will do different code but regardless of which one is pressed it will continue on in the function. For Example

function mainloop(){

        document.getElementById("buttonyes").addEventListener("click", () => {
            /* do some code */
        })
        
        document.getElementById("buttonno").addEventListener("click", () => {
            /* do some different code */
        })
        /* wait for either button to be pressed and then continue with code */
        console.log("yay waiting for stuff")
}

I believe the solution to this is promises and creating other functions to handle the buttons; however, tutorials I've seen only show one function solutions and if I understand correctly the EventListener when activated is using another function all to itself. I've come over from C and all this object properties asynchronization stuff is throwing me for a loop.

I'd really love a way to keep it all in the same main function as this challenge specifically called for me to use async/await on this damned buttons.

Put the console.log in a seperate function than call it at the end of both the first and last event handler — mousetail
– mousetail, Commented Jul 30, 2022 at 9:18
Is mainloop() called multiple times? Can the user press these buttons only once, or many times? — Bergi
– Bergi, Commented Jul 30, 2022 at 11:31
@Bergi currently they can be pressed multiple times (they aren't meant to be able too)... One crisis at a time though. The whole mainloop is meant to be just that a loop. A button is pressed, information is displayed and then at the end of the loop everything resets. — TheCourtJester
– TheCourtJester, Commented Jul 30, 2022 at 14:22
@TheCourtJester What do you mean by "resets"? This sounds like a problem that can't be solved just one step at a time, since it affects the whole architecture of the application. — Bergi
– Bergi, Commented Jul 30, 2022 at 18:37
Please be aware that addEventListener will remain active once you set it. If you want to make the buttons "unclickable" you could disable them with CSS, or you could remove the listener with removeEventListener, or you could keep track of the state with a variable. For example, textDisplayed = true. — Kokodoko
– Kokodoko, Commented Jul 31, 2022 at 9:49

Kokodoko · Accepted Answer · 2022-07-30 09:47:13Z

An Event Handler is already a way of using asynchronous code. The code inside the handler already waits to be executed until somebody presses the button.

If you have some function that needs to be executed after both clicks you can simply add it to both event handlers. Btw you don't need to put the addEventListener in a loop! Just add them once.

    document.getElementById("buttonyes").addEventListener("click", () => {
        /* do some code */
      
        myNewFunction()
    })
    
    document.getElementById("buttonno").addEventListener("click", () => {
        /* do some different code */

        myNewFunction()
    })


    /* wait for either button to be pressed and then continue with code */
    function myNewFunction() {
         console.log("yay waiting for stuff")
    }

You only need another async await if the code in the buttons does something that needs to be awaited, for example fetching data from the internet. Or else we need a bit more context to know why you want to solve this problem with an extra async await.

Evans Kiptarus Kibet · Accepted Answer · 2022-07-30 09:52:02Z

-3

I would advise you to use the async await with promise to handle this kind of scenario. eventHandler supports the async await under the hood.

Please check this example:-

document.querySelector('#btn')
  .addEventListener('click', handleClick)

async function handleClick() {
  await new Promise((resolve) =>
                    setTimeout(resolve, 5000))
  alert('clicked')
}

answered Jul 30, 2022 at 9:52

Evans Kiptarus Kibet

1942 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to use async/await on event handlers on buttons in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related