如何在用戶輸入和功能之間建立聯系？
[英]How do i connect between user's input and function?
問題描述
我正在使用html / css，js和jquery創建一個冒險游戲。
我需要以某種方式將用戶的輸入（從html輸入框）連接到js開關，或者在用戶單擊enter時是否else語句（幾乎像hint（）函數）。 例如，當游戲問用戶“是/否”問題時，我想讓他在輸入框中寫下答案，然后在按Enter鍵之后提交此答案，以便游戲可以繼續進行，取決於他做出的選擇。
這是我的代碼：
// 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 個解決方案
解決方案1
0 2016-11-15 13:38:09
您可以聲明全局變量，並使用它在click事件和switch函數之間進行連接。 並且不要忘記在切換后將其設置回null。 這樣的事情可以做：
// 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 = "";
}
解決方案2
0 2016-11-15 13:38:25
如果我是你，我會這樣做：
<form>
<input type="text" id ="userInput" placeholder="Type the command here" name="myInput"/>
<button type="submit" id = "btn"> Enter </button>
</form>
然后在您的JS中：
$("#btn").submit(function(e){
e.prevetDefault();
//your code...
var choice = $("#userInput").val();
switch(choice){...}
//rest of your code...
現在，Enter和鼠標單擊一樣有效
解決方案3
0 2016-11-15 13:39:55
我首先建議您，而不是所有這些BS提交，您應該使用HTML表單標簽，並帶有onsubmit="submitted()"和函數submitted以使用event.preventDefault()
其次，您應該使用承諾對“對話”周期應用一些邏輯。
這意味着您的代碼將類似於：
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);
}
我通常不會為他人編寫代碼，因此請以此為指導
如何獲取用戶的輸入並將其存儲以在 Javascript function 中使用？
[英]How do I take a user's input and store it to be used in a Javascript function?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.