How do i connect between user's input and function?
Question
I'm creating an adventure game using html/css, js and jquery.
I need somehow to connect user's input(from html input box) to js switch or if else statement when user clicks on enter(almost like a prompt() function). For example, when the game asks user a yes\\no question i want to let him write the answer in the input box, and submit this answer after pressing enter button so the game could continue depending the choices that he makes.
Here is the code i have:
// This is a button click function. When user clicks the Enter button with the left mouse, all the text from the input appends to the "story board". $("#btn").click(function(){ var btnClick = $("input[name=myInput]").val(); $("#storyBoard").append(btnClick+"<br>"); $("input[name=myInput]").val(""); var element = document.getElementById("storyBoard"); element.scrollTop = element.scrollHeight; }); // It is an additional function for button click function, that allows user to press enter button on a keyboard to call the click button function. $("#userInput").keyup(function(event){ if(event.keyCode == 13){ $("#btn").click(); } }); /* Here i stucked. I writed a sketch switch(), but how do i connect between this and the user input? */ var mission1 = function(){ showText("Welcome to the virtual pseudo-reality.<br> Are you ready to start your journey?"); var readyToStart = function(){ switch(){ case "yes": console.log("yes"); break; case "no": console.log("no"); break; default: console.log("yes or no?"); readyToStart(); } }
body { border: .1em solid #232C01; margin-top: 5em; margin-left: 10em; margin-right: 10em; background-color: #070900; background-image: url(images/Star-Wars-7-Poster-Banner.jpg); background-repeat: no-repeat; background-position: center; background-size: 100%; } #storyBoard{ border: .1em solid #f0ff00 ; background-color: #000000 ; margin-top: 2em; margin-right: 5em; margin-left: 5em; height: 20em; padding-left: 20px; padding-right: 50px; font-size: 50px; color: #f3fd4e; opacity: .95; overflow:auto; } #userInput{ border: .05em solid #adae32; margin-bottom: 2em; margin-left: 5em; font-size: 50px; width: 71%; color: #0033bd; } #btn{ font-size: 50px; background-color: #0E1200; color: #feff6c; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>MacroG0D - My first game</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src ="Js/basicFight1vs1Function.js"> </script> </head> <body> <div id = "storyBoard"> </div> <input type="text" id ="userInput" placeholder="Type the command here" name="myInput"/> <button id = "btn"> Enter </button> </body> </html>
3 answers
solution1
0 2016-11-15 13:38:09
You can declare global var and use it to connect between your click event and switch function. and don't forget to set it back to null after switch. something like this can do:
// This is a button click function. When user clicks the Enter button with the left mouse, all the text from the input appends to the "story board".
var in;
$("#btn").click(function(){
// set `in` variable from user input
var btnClick = in = $("input[name=myInput]").val();
$("#storyBoard").append(btnClick+"<br>");
$("input[name=myInput]").val("");
var element = document.getElementById("storyBoard");
element.scrollTop = element.scrollHeight;
});
// It is an additional function for button click function, that allows user to press enter button on a keyboard to call the click button function.
$("#userInput").keyup(function(event){
if(event.keyCode == 13){
$("#btn").click();
}
});
/* Here i stucked. I writed a sketch switch(), but how do i connect between this and the user input? */
var mission1 = function(){
showText("Welcome to the virtual pseudo-reality.<br> Are you ready to start your journey?");
var readyToStart = function(){
//switch `in` variable
switch(in){
case "yes": console.log("yes");
break;
case "no": console.log("no");
break;
default: console.log("yes or no?");
readyToStart();
}
//set `in` to original
in = "";
}
solution2
0 2016-11-15 13:38:25
If I were you I'd do this like this:
<form>
<input type="text" id ="userInput" placeholder="Type the command here" name="myInput"/>
<button type="submit" id = "btn"> Enter </button>
</form>
and then in your JS:
$("#btn").submit(function(e){
e.prevetDefault();
//your code...
var choice = $("#userInput").val();
switch(choice){...}
//rest of your code...
Now Enter should work as well as mouse click
solution3
0 2016-11-15 13:39:55
I would first recommend you that instead of all this BS submittion, you would use an HTML form tag, with onsubmit="submitted()" and function submitted to use event.preventDefault()
Second, you should apply some logic to the "conversation" cycle, using promises.
Meaning your code will look something like:
let currentState = {
options: null,
promise: null
};
function newMessage(text, options = null) {
currentState.options = options;
currentState.promise = new Promise();
return currentState.promise;
}
newMessage("Ready to start?", ["yes", "no"]).then((message) => {
switch(message) {
case "yes":
newMessage("Great! your name please?").then((name) => {
alert("your name is " + name);
});
break;
case "no":
newMessage("So what are you doing here!?!?").then((password) => {
if(password == "BLAH") {
alert("you have found an easter egg");
}
});
break;
}
});
function submitted(event) {
event.preventDefault();
let value = document.getElementById('my-input').value;
if(currentState.options !== null) {
if(!currentState.options.indexOf(value)) {
alert("Options are: "+JSON.stringify(currentState.options));
return;
}
}
currentState.promise.resolve(value);
}
I do not normally write the code for people, so take this as a direction
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.