title: Javascript runs loop too much
body: <p>Mind that I just started with JS.</p>
  
  <p>I am writing a simple application in which a user needs to translate a word in English to a word in French. What I want to do is to show the English word in a div. The user then enters the French word in an input which is processed when the <code>enter</code> key is pressed.</p>
  
  <p>I have two pages, Test2 contains an English and French word like below.</p>
  
  <p><code>yes,oui</code></p>
  
  <p>The other page contains all the JS and HTML. The problem I am encountering is that after the user has filled in one word (and this word is either correct or incorrect), the script should automatically move on to the next word (i.e. <code>no,non</code>). I tried to do this by making a function and calling this function inside this same function. For some reason this goes wrong after filling in the first word (the user is then asked multiple words at once). Does anyone have any idea to solve or work around this problem?</p>
  
  <pre><code>&lt;script&gt;
  function getword(){
      var arr;
      $.ajax({ type: "POST", async: false, url: 'Test2', success: function(data) { 
          arr = data.split (",");
      }});
      return {or: arr[0], tr: arr[1]};
  }
  function process(or, tr){
      if(tr == $("#translation").val()){
          return true;
      }else{
          return false;
      }
  }
  $(document).ready(function(){
      go();
      function go(){
      var data = getword();
      var or = data.or;
      var tr = data.tr;
      alert("Translate to French: " + or);
      $("#translation").keypress(function(event) {
          if (event.which == 13) {
              if(process(or, tr)){
                  alert('good');
                  go();
              }else{
                  alert('bad');
                  go();
              }
          }
      });
      }
  }); 
  
  &lt;/script&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  &lt;input type="text" placeholder="Antwoord" id="translation"/&gt;
  </code></pre>