title: JavaScript cannot change image using attr
body: <p>My html code here is to click next and change the graph.
  I have put 1.jpg, 2.jpg, 3.jpg, and html file into same file.</p>
  
  <p>My question is that I want to change my graph by the code <code>$("#page1").attr("src", fname);</code>.</p>
  
  <p>But it cannot do it at all. It always shows 1.jpg.</p>
  
  <pre><code>
  &lt;script&gt;
  var order = new Array('1.jpg', '2.jpg', '3.jpg');
  var trial = 0; //current trial
  document.write("STRING:");
  $(document).ready(function(){
   ShowImage(trial);
  });
  
  function ShowImage(t) {
   $("#page1").show();
   var N = t+1; //counting from 1
   $(".progress").text('('+N+'/'+order.length+')');
  }
  
  function NextImage() {
   current = current + 1;
   $("#page1").hide();
   var fname=order[current];
   $("#page1").attr("src", fname);
   });
   ShowImage(current);
  }
  
  &lt;/script&gt;
  
  &lt;style&gt; .page {display: none;} &lt;/style&gt; 
  
  &lt;div class="page" id="page1"&gt;
  &lt;img src=1.jpg&gt;&lt;br&gt;
  &lt;input type=radio name=f1 value=T&gt; T
  &lt;input type=radio name=f1 value=F&gt; F &lt;br&gt;
  &lt;a href="javascript:NextTrial()"&gt;Next&lt;/a&gt; 
  &lt;span class="progress"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="page" id="page2"&gt;
  &lt;h3&gt;All done!&lt;/h3&gt;
  &lt;/div&gt;```
  </code></pre>