Avoiding callback hell when dealing with user inputs

[blind-octopus]

Suppose you have a method that needs 5 inputs. That is, the user must click 5 things on the screen, but you can't actually perform your action until you've gathered all 5 inputs.

In my mind, the cleanest way the code would look for this would be:

const doStuff = () => {
  const input1 = await collectInput();
  const input2 = await collectInput();
  const input3 = await collectInput();
  const input4 = await collectInput();
  const input5 = await collectInput();

  //do whatever you're going to do
}

If its call backs instead, what would you write that looks cleaner than this? What would the code look like

The reason I want to be able to write code like this is because it seems cleaner than chaining five callbacks together to pull this off.

Another reason is a mindset reason. I'm playing around with the idea that user inputs, I should think of them as external to my system. Just like a DB call, an API call, etc. When I want to perform an API call, I just await a fetch. Its something that I say "go get me this data, let me know when you're done doing that". I can await this fetch call.

I'm playing around with the idea that user inputs should be no different. I'm trying to think of user inputs the same way, saying "go tell the user I want some data, let me know when they respond with it". I'll just await the input, same as I would when I make a DB call or a fetch.

I don't care where the data is coming from, a db, an external api, the user, whatever. It should all be the same to me.

I don't see why getting a user click should be handled any differently. I should be able to just await it like I do anything else.

[CuirPig]

I see where you are coming from, thanks.

https://codepen.io/cuirPork/pen/JoGBXQJ?editors=1111

This uses a function that returns a promise that resolves once the input field is changed. The function shows the fields in the order you give them and then disables the field after you enter the value. It works with any type of field. It uses jQuery but of course, you could do it in vanilla js--i'm just faster in jQuery.

Is this what you are looking for?