我如何连接用户的输入和功能

How do i connect between user's input and function?

本文关键字:用户 输入 功能 连接 何连接      更新时间:2023-09-26

我正在使用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);
}

我通常不为别人写代码,所以把这作为一个方向