Wait for User Input

Question

I have an HTML page with some data that needs to be saved or discarded before certain other things can be done. I have several functions that will need to pause, wait for the user to make a decision, and then, based on that decision, continue on one of two paths. The kicker is that each function is different. For example, function A will execute 3 lines of code, ask for input, and then execute another 2-4 lines depending on the answer. Function B will execute 2 different lines of code, ask for input, and then execute another set of code. I know that I can use prompt() to get a browser dialog box but I don't want that. Instead, I want the user to click a button in a modal. How would I do that so that the code is reusable.

I know I can break each of these up into 2 separate functions (for a total of 4 below) but I would prefer not to have to do that.

// Note: I know this code doesn't make a lot of sense and isn't runnable. It is to demonstrate the 
// structure of what I'm trying to do.

function doSomething() {
  let a = now();
  console.log("it is" + a);

  // TODO: show a modal asking if save or discard changes

  if (discard) {
    $("myContainer").replaceWith("<div></div>");
  } else {
    saveChanges();
}

function doSomethingElse() {
  let b = 12 * 12;
  console.log("12 x 12 is" + b);
  let c = 1 + 1;
  console.log("1 + 1 is" + c);

  // TODO: show a modal asking if save or discard changes
  // Wait for user input

  if (discard) {
    $("myContainer").replaceWith("<div></div>");
  } else {
    alert("Saving Changes Now!");
    saveChanges();
}

$("#button1").on("click", doSomething);
$("#button2").on("click", doSomethingElse");

Answer 1 · 2025-11-18 21:22:30Z

mykaf

• Nov 18 at 21:22

prompt() is a blocking function, meaning it pauses the script until the user interacts with it. You would need to separate out your functions and call the next piece with an event listener in your modal.

Answer 2 · 2025-11-18 22:05:20Z

Split the code into more functions. The first one runs until it displays the field for the user to fill in, with a button. The next bit runs in another function, which is triggered by the user pressing the button- you have to handle that button's click event.

Your current mindset is thinking in terms of it being a linear program, like you might get in a command-line app. You need to start thinking in terms of event driven programming instead - listening for, and responding to user actions when they happen.

Answer 3 · 2025-11-18 22:39:24Z

ControlAltDel

• Nov 18 at 22:39

You can actually use a promise and either await or promise.then

Answer 4 · 2025-11-19 11:50:09Z

ADyson

• 2 days ago

@ControlAltDel why use a promise here? The issue is waiting for user input...so you can just handle the relevant UI event to know when the code needs to continue. Not sure how a Promise would add value in this case? Have you got an example?

Answer 5 · 2025-11-19 12:08:20Z

You have the wrong mental model for working with interactive GUIs. You don't run a function and wait for input. What you do is, you run your code up to the point where the user needs to make a decision. You then update the GUI to present the user with that decision. To the buttons in that GUI, you attach event handlers. If and when the user clicks button A, you call a new, separate function that does X. If and when the user clicks button B, you call a different function which does Y.

Pseudocode:

function doSomething() {
    ...

    let buttonA = createButton();
    buttonA.addEventListener('click', doX);

    let buttonB = createButton();
    buttonB.addEventListener('click', doY);

    showModal(buttonA, buttonB);
}

function doX() { ... }
function doY() { ... }

Your code doesn't wait for the user to make a decision, your code simply ends and does nothing. If and when the user does make a decision, that triggers additional code that will pick up where your previous code left off.

Answer 6 · 2025-11-19 19:02:54Z

To extend the reply from deceze, specifically you are looking for event-driven programming, which really is its own paradigm. Another way to think about this is you are building an asynchronous workflow. Related: asynchronous programming.

It is a shift in how you think about programming logic. It's not a series of steps that happen at a predictable time; it's a series of responses to external stimuli (events) that happen unpredictably, although you can control the order they happen in your case by restricting what the user can interact with.

Collectives™ on Stack Overflow

Wait for User Input

6 Replies 6

Your Reply

Collectives™ on Stack Overflow

Wait for User Input

6 Replies 6

Your Reply

Sign up or log in

Post as a guest