title: fadeOut inside the onclick function
body: <p>I have written a code which shows question on click and also shows answer for certain period of time. The code works fine when there is no fadeOut function inside the code. As soon as I put the fadeOut function, the question and answer is shown only once. After that only question is shown . Why is this happening ?</p>
  
  <p>Here is my code link :<a href="http://jsfiddle.net/sagesony/6qDap/1058/" rel="nofollow">http://jsfiddle.net/sagesony/6qDap/1058/</a></p>
  
  <p>and the code</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;   
  &lt;/script&gt;
  &lt;body&gt;
      &lt;p&gt;Question: &lt;span id="question"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;p&gt;Answer: &lt;span id="answer"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;input id="start" type="button" value="start"/&gt;
      &lt;input id="show" type="button" value="show answer"/&gt;
  &lt;script&gt;
      document.getElementById("start").onclick=function(){
         var i=Math.round(Math.random()*3);
         var verbs=["play","run","go","kill"];
         document.getElementById("question").innerHTML=verbs[i];
         document.getElementById("show").onclick=function(){
              var answers=["golf","dog","school","none"];
              document.getElementById("answer").innerHTML=answers[i];
              $("#answer").fadeOut(1000);
         };
     };
  &lt;/script&gt;
  </code></pre>