title: Javascript Image Gallery with Array
body: <p>I'm trying to modify html img source with anchors that trigger javascript on click, but it's not working. Here's my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;img src='./images/img1.png' id='gallery'&gt;
  &lt;a href="#" id="back"&gt;Back&lt;/a&gt; - &lt;a href="#" id="next"&gt;Next&lt;/a&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var image = new Array(3)
  image[1]="./images/img1.png"
  image[2]="./images/img2.png"
  image[3]="./images/img3.png"
  var num = 1;
  
  document.getElementById('next').addEventListener('click', function(galleryNext){
  num=num+1
  if (num==4)
  {num=1}
  document.getElementById('gallery').src=image[num];
  });
  
  document.getElementById('back').addEventListener('click', function(galleryPrevious){
  num=num-1
  if (num==0)
  {num=3}
  document.getElementById('gallery').src=image[num];
  });
  </code></pre>