CODEWITHSUNDEEP
javascript
user3174765
user3174765

Reputation: 3

Creating Ask Function in Javascript

I'm pretty new to Javascript, so I figured I'd start on a Text Based Game to start out. What I need to do, is to be able to detect when the game is waiting for a command, and when the game is waiting for an answer. Here's what I've got.

var textIn = document.getElementById('input-textbox');
var textOut = document.getElementById("output-textbox");

function process(input) {
    var command = input.split(" ")[0];

    if(command == "help") { 
        return "Help dialog";
    }else{
        return "Unknown command: " + input + ". Please type /help for a list of commands.";
    }
}

function go() {
    var input = textIn.value;
    textIn.value = "";
    output(process(input));
}

function output(text){
    textOut.value += text + "\n";
}

function createPlayer(){
    output("Please Type Your Name")
    // Wait for player response and set it as a variable.
}

createPlayer();

What would be the best way to implement this?

Upvotes: 0

Views: 2431

Answers (2)

RobG
RobG

Reputation: 147413

A very simple implementation is to use a form with a submit listener that cancels submission if all goes to plan. A user can enter text into the input and see the result in the textarea.

The textarea is disabled so users can't enter text into it but script can. Users can enter input then just press enter, or tab to the submit button and press enter, or click the submit button. The script runs on submit, and cancels it so they stay on the same page.

If scripting is disabled, the form will submit and you can handle things at the server.

<form onsubmit="go(); return false;">
  <input id="input-textbox">
  <textarea id="output-textbox" rows="20" cols="50" disabled></textarea>
  <input type="submit" value="Ask question">
</form>

Upvotes: 0

Lorantz
Lorantz

Reputation: 39

You have a few options, you could use onclick and have a button that the user clicks and then call your functionality to fill in the answer for your HTML answer (id="output-textbox" in your example)<-- My vote *.

... or you could choose to check on which element is focused or if tab/enter is hit while in the input box and then put your answer field after the tab/enter is hit. I think the latter method, you should have a HTML5 placeholder attribute to say "hit tab{enter} when finished" or something along those lines and then check for the tab while focused on the element -- this could be accomplished with jQuery selectors or override the current focus method for that input element or potentially use document.activeElement to see what is focused on and then if it is the answer that is focused on and the input isn't blank fill it in, etc, etc, etc.

*If you are new to Javascript, I say have two buttons (one labeled 'answer' and one labeled 'clear'), and then use the onclick attribute for HTML button elements to call a Javascript method easily. This will get you started and be more straightforward, double check what you have works for DOM manipulation and move forward to having less buttons and more sleek DOM manipulation.

Good luck!

Upvotes: 1

Related Questions