我如何连接用户的输入和功能
How do i connect between user's input and function?
我正在使用html/css, js和jquery创建一款冒险游戏。
我需要以某种方式连接用户的输入(从html输入框)到js开关或if else语句,当用户点击进入(几乎像一个提示()函数)。例如,当游戏询问用户"是"或"否"问题时,我想让他在输入框中写下答案,并在按回车键后提交这个答案,这样游戏就可以根据他所做的选择继续进行。
下面是我的代码:
// 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>
你可以声明全局变量,并使用它来连接你的点击事件和开关函数。别忘了在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 = "";
}
如果我是你,我会这样做:
<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...
现在回车应该和鼠标点击
我首先建议您使用HTML表单标签,使用onsubmit="submitted()"
和submitted
函数来使用event.preventDefault()
,而不是所有这些BS提交
第二,你应该在"conversation"循环中应用一些逻辑,使用promise。
意味着你的代码看起来像:
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搜索具有用户输入的数组
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 如何使用JavaScript中的用户输入创建序列/序列
- 如何在用户输入时实例化数组
- 如何从客户端的数组中获取用户输入和返回值
- 如何在用户输入 javascript 时更改值
- 如何从多个不同的html页面获得mongodb文档的用户输入
- PayPal按钮是否有一个简单的选项,其中金额基于一些用户输入
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 如果用户输入的长度小于最小长度,则显示错误消息
- 随机生成用户输入
- 如果图像标记是用javascript编写的,并且需要用户输入,那么图像不会随页面加载吗
- Javascript:使用用户输入搜索数组
- 根据用户输入的数字生成文本框
- 如何通过获取用户输入和使用按钮来运行JavaScript函数
- 使用用户输入修改链接
- 如何解决取消抖动的用户输入上的竞争条件
- 从用户输入中制作数组动画,如打字机(javascript)
- 如何在视图中保存用户输入内容,并在离开页面时对控制器进行后期调用