Why can't I display a new image using javascript?
<p>I am trying to create a page that allows viewers to view a new image every time the user clicks on it. The images are named 0.jpg, 1.jpg, 2.jpg, 3.jpg, and 4.jpg.</p>

<p>However, the image URL never changes upon clicking. I also tried analyzing the image in Chrome Developer tools, and the console issues no errors. Why is that?</p>

<p>Here is my javascript.</p>

<pre><code>var imageCount = 5;
var currentIndex = Math.floor(Math.random() * imageCount);

  function loadNewPhoto() {
    currentIndex = (currentIndex + (Math.random() * 3) + 1) % imageCount;
    alert(currentIndex);
    document.getElementById('generatedImage').src = 'images/' + currentIndex + '.jpg';
  }

  // Shuffle order of photos.
  document.onready = function() {
    loadNewPhoto();
    document.getElementById('getMeNewPhotoLink').onclick(function(e) {
      e.preventDefault();
      loadNewPhoto();
    });
  }
</code></pre>

<p>and HTML</p>

<pre><code>&lt;a href="#" id="getMeNewPhotoLink"&gt;
    &lt;img id="generatedImage" src="images/0.jpg" alt="" /&gt;
&lt;/a&gt;​
</code></pre>

<p><a href="http://jsfiddle.net/qLQZf/" rel="nofollow">http://jsfiddle.net/qLQZf/</a></p>
