Javascript - Waiting for user input (callbacks)

Question

I've been looking at other questions trying to get my head around callbacks but I just can't make sense of it enough to use in my context. I'm writing a text based game which uses purely text input. When needed, I want the game to ask a question with a varying amount of answers and then wait until a valid response is given. Below is an example that doesn't work but explains what I'm trying to do. Can anyone provide me with any guidance? Thanks.

//main code

pEQUIP = ["foo", "foo", "foo"];
exItem = "ball";

function prompt(numPrompts, callback) {
  //waits until user types a number <= numPrompts and presses enter, then returns the valid result entered
}

$('#gametext').append("<p>" + "What slot would you like to use to hold this item?" + "</p>");
//where a function would be stopping the code until a valid answer is given
if (prompt == "1") {
  pEQUIP[0] = exItem;
} else if (prompt == "2") {
  pEQUIP[1] = exItem;
} else if (prompt == "3") {
  pEQUIP[2] = exItem;
}

//Just a quick n dirty way of testing it worked below:
$('#gametext').append("<p>" + pEQUIP[0] + pEQUIP[1] + pEQUIP[2] + "</p>");


//parses user info unsure if this could be used or would have to be copied
$(document).ready(function() {
  $(document).keypress(function(key) {
    if (key.which === 13 && $('#userinput').is(':focus')) {
      var value = $('#userinput').val().toLowerCase();
      $('#userinput').val("");
      //playerInput(value); Is usually here, would lead to
      //a switch which parses commands typed by the user.
      //Unsure if it can be used for this problem as pausing
      //the code I think would stop the switch?
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="gametext"></div>
  <input id="userinput">
</body>

zfrisch · Accepted Answer · 2017-11-22 23:47:42Z

0

It appears as though you're thinking of functions incorrectly.

Functions are:

A series of steps that may return data when they're invoked. You invoke a function by passing arguments to the function name, even if the arguments are nothing () - a.e. alert(string) or myFunction()
Not comparable to anything but themselves. In your code you have prompt == "1" this isn't going to work. prompt is a function name and it isn't invoked so you are literally comparing the function itself to the string "1".
Able to return data when invoked. That data can be compared.

Note: Also, very importantly, prompt is the name of a default function(like alert or console) and you shouldn't overwrite it. It isn't considered a reserved keyword by the language but altering it will cause havok if any other library you're using, or any other programmer doesn't know it's been overwritten, and tries to invoke it.

prompt("this is a normal prompt");

Furthermore you have the document setup to check the value of the text box itself on keypress. You should probably change this to an event listener on the text box, but there isn't any reason to continuously loop a function beyond this while waiting for the box to match some predefined input.

The Flow is this:

type in the box
hit enter
check value
if value is 1 or 2 or 3 or any other acceptable answer do something

If that's all you need currently then you do not need to work so hard for the functionality when a single event listener could do the trick:

$("#input_box").on("keypress", function(e) {
  if(e.keyCode === 13) {
    let value = $("#input_box").val();
    if(value === "1" || value === "2" || value === "3") {
        //do whatever
    }
  }
});

$("#input_box").on("keypress", function(e) {
  if(e.keyCode === 13) {
    let value = $("#input_box").val();
    if(value === "1" || value === "2" || value === "3") {
        console.log("accepted");
    }
    $("#input_box").val("");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_box">

answered Nov 22, 2017 at 23:47

zfrisch

8,6901 gold badge26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jay Shead Over a year ago

Thank you! And I'm sorry, I should have put more thought into my example. I put a function in there as I had seen it used in other answers and I thought I'd need one somewhere. The "prompt" thing was just meant to be a placeholder of some kind, though I was actually unaware that it was a reserved keyword. Anyway, your solution did help me with this problem! Although, since I could see myself using prompts like this fairly often, having some sort of "function" I could call would be useful.

Collectives™ on Stack Overflow

Javascript - Waiting for user input (callbacks)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related