2016-04-10 11 views
0

コンソールに基づいたテキストゲームなどにしたい。ユーザーが自分の名前を書くときには、年齢入力のある関数を呼び出す必要があり、年齢の入力後には、セックス入力を呼び出す必要があります。しかし、私の年齢を書き留めると、getAgeが再び呼び出され+次の関数が呼び出されます。次の関数の後、getAge + next関数+ next関数を呼び出します。私はあなたが知っていることを祈っています。どうすれば修正できますか?私はコールバックを試みたが、それは役に立たなかった。別の関数が完了した後に関数を呼び出すと、前の関数がすべて呼び出されます。

$(document).ready(function(){ 
 
    var Player = { 
 
     username : "", 
 
     age : null, 
 
     sex : "", 
 
     
 
    }; 
 
    
 
    function textArea($text){ 
 
     return $('#textArea').val($('#textArea').val() + $text); 
 
    }; 
 
    
 
    function clearInput(){ 
 
     return $('#inputs').val(''); 
 
    } 
 
    
 
    var functions = { 
 
     start : function start(){ 
 
      functions.getUsername(); 
 
     }, 
 
     //START GET USERNAME 
 
     getUsername : function getUserName(callback){ 
 

 
      //Hello! Tell me your username! 
 
      textArea("Vítej! Zadej svou přezdívku!"); 
 
    
 
      $('#inputs').keypress(function (e){ 
 
       if (e.which == 13){ 
 
        Player.username = $('#inputs').val(); 
 
        textArea("\n" + Player.username + "\n"); 
 
        clearInput(); 
 
        functions.getAge(); 
 
       } 
 
      }); 
 
     }, 
 
     //END GET USERNAME 
 
    
 
     //START GET AGE 
 
     getAge : function getAge(){ 
 

 
      //Tell me your age! 
 
      textArea("Zadej svůj věk!"); 
 
      
 
      $('#inputs').keypress(function (e){ 
 
       if (e.which == 13){ 
 
        Player.age = $("#inputs").val(); 
 
        textArea("\n" + Player.age + "\n"); 
 
        clearInput(); 
 
        functions.getSex(); 
 
       } 
 
      }); 
 
     }, 
 
     //END GET AGE 
 
     
 
     getSex : function getSex(){ 
 
    
 
      //Tell me your sex: male/female 
 
      textArea("Zadej pohlaví: muž/žena"); 
 
      
 
      $('#inputs').keypress(function (e){ 
 
       if (e.which == 13){ 
 
        Player.sex = $('#inputs').val(); 
 
        textArea("\n" + Player.sex + "\n"); 
 
        clearInput(); 
 
        //Another function 
 
       } 
 
      }); 
 
     } 
 
    }; 
 
    
 
    functions.start(); 
 
});
#content>*{ 
 
    display: block; 
 
    margin: 0 auto ; 
 
} 
 
#textArea{ 
 
    box-shadow: 2px 2px 2px grey; 
 
    background: black; 
 
    color: white; 
 
} 
 
#inputs{ 
 
    width: 61%; 
 
    margin-top: 10px; 
 
    background: black; 
 
    color: white; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 
<body> 
 
    <div id="content"> 
 
     <textarea id="textArea" rows="30" cols="100"></textarea>  
 
     <input type="text" id="inputs"> 
 
    </div> 
 
</body> 
 
</html>

+2

あなたのコードが '.keypress()'を呼び出すたびに、既に追加されているイベントハンドラを取り除かない**イベントハンドラを追加します。 'onkeypress'プロパティに関数を代入するのと同じではありません。 – Pointy

答えて

1

各関数呼び出しは、あなたのテキストエリアにkeypressリスナーを追加します。したがって、getAge()コールの後、2人のリスナーがいます。したがって、次にキーを押すと、getAgegetSexが呼び出されます。そのため、新しいリスナーを設定する前に、以前のリスナーを削除する方法があります。

+0

さて、あなたが何を意味しているのか知っていますが、どうすればいいのか、分かりません。 –

+0

jquery offメソッドを調べます。 – jlowcs