Custom prompt function not quite finished

Question

I'm working on a browserbased text-style game (it's a text game that uses some images/animations, but text to convey story/actions/commands). I used to have it work through prompt("What is your class?"); (Warrior, Wizard ETC), but wanted to create my own function for doing this to make it prettier. Below some code:

/*
    1st value: Message being asked
    2nd value: input field being used
    3rd value: message block where question is presented
*/
var _cprompt = cPrompt('What is your class?', 'dialog-input', 'dialog-text');
alert(_cprompt);

And this is the actual function cPrompt();

/*
Custom prompt class
message: The message shown
inputField: The ID of the txtfield where the user inputs his answer
messageField: The textarea where the response appears
userInput: Empty variable to store the users input
*/

function cPrompt(mssg, inputFieldId, messageFieldId) {
    var message = mssg;
    var inputField = $('#'+inputFieldId);
    var messageField = $('#'+messageFieldId);
    var userInput = "";

    messageField.append(message);

    // Detect enter space being pressed in inputField
    inputField.keyup(function (e) {
        if (e.keyCode == 13) {
            userInput = inputField.val();
        }
    });
}

So far so good, but I need it to stop other code from executing untill the user has filled in a response and has hit enter (similar to prompt();), so in this case it would not perform alert(_cprompt); untill the user has given some input and hit enter.

I tried making the function as dynamic as possible, but please feel free to add anything that might make it better/faster/easier to use.

Thanks for your help.

Answer 1

Using a callback is a great way to perform an action after an event has occured. In this case the event would be 'the user filling in a response'. Check out a working example here http://jsfiddle.net/Q2qUK/2/.

<div id="dialog-text"></div>
<input id="dialog-input" />

In the cPrompt function, you can run the callback function just like any other function when the time is right. Instead of returning a value you pass the results as a parameter to the callback function.

function cPrompt(mssg, inputFieldId, messageFieldId, callback){
    var message = mssg;
    var inputField = $('#'+inputFieldId);
    var userInput = "";

    cNotify(messageFieldId, message);

    // Detect enter space being pressed in inputField
    inputField.on('keyup', function (e) {
        if (e.keyCode == 13) {
            userInput = inputField.val();
            callback(userInput);

            // If you want the callback to only be executed once,
            // unbind the keyup event afterwards.
            inputField.off('keyup');

            // Empty the input field after processing the user's message.
            inputField.val('');
        }
    });
}

As an example of how to let your coding respond to the user input, I've created this cNotify function to show the user input in the dialog-text element.

function cNotify(messageFieldId, message){
    $('#' + messageFieldId).append('<div>' + message + '</div>');
}

To pass the callback use an anonymous function as a parameter to the cPrompt function.

cPrompt('What is your class?', 'dialog-input', 'dialog-text', function(_cprompt){

    // Here you put all the code you want to run after the user pressed enter.
    cNotify('dialog-text', _cprompt);
});

Answer 2

Use callbacks.

function cPrompt(mssg, inputFieldId, messageFieldId, callback) {
    var message = mssg;
    var inputField = $('#'+inputFieldId);
    var messageField = $('#'+messageFieldId);

    messageField.append(message);

    // Detect enter space being pressed in inputField
    inputField.keyup(function (e) {
            if (e.keyCode == 13) {
                callback(inputField.val());
            }
    });
}

cPrompt('What is your class?', 'dialog-input', 'dialog-text', function (_cprompt) {
    alert(_cprompt);
});