title: My href onclick event is not working
body: <p>As a part of a project in my job, I'm trying to do a very simple Image Slider.</p>
  
  <p>I made a function that should make the slide but the problem is when I click on the arrows, it's not changing the image to the next/prev one.</p>
  
  <p>Here's my code:</p>
  
  <h1>HTML:</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Simple Photo Slider&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/normalize.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/main.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div class="container"&gt;
  
  
        &lt;!--Left Arrow--&gt;
        &lt;div class="arrow"&gt;
            &lt;a href="#" onclick="slide(-1)"&gt;
                &lt;span class="left"&gt;&lt;/span&gt;
            &lt;/a&gt; 
        &lt;/div&gt;
  
        &lt;!--Image--&gt;
        &lt;img src="images/img1.jpg" class="img" /&gt;
  
        &lt;!--Right Arrow--&gt;
        &lt;div class="arrow"&gt;
            &lt;a href="#" onclick="slide(1)"&gt;
                &lt;span class="right"&gt;&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
  
  
  
    &lt;/div&gt; 
    &lt;script src="js/index.js"&gt;&lt;/script&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>JS:</h1>
  
  <pre><code>var imageCount = 1;
  var total = 5;
  function slide(x)
  {
      var image = document.getElementsByClassName('img');
      imageCount += x;
      if (imageCount &gt; total || imageCount &lt; 1)
          imageCount = 1;
      image.src = "images/img" + imageCount + ".jpg";
  }
  </code></pre>
  
  <h1>CSS:</h1>
  
  <pre><code>.container {
      width:700px;
      height:600px;
      margin: 20px auto;
      position:relative;
  }
  
  .arrow {
    display: inline-block;
    vertical-align: middle;
    position:absolute;
    top:40%;
    width:3em;
  }
  
  
  
  a {
    display: inline-block;
    border-radius: 50%;
    text-align:center;
  }
  
  a:hover .left, a:hover .top, a:hover .bottom, a:hover .right{
    border: 0.3em solid #e74c3c;
  }
  
  a:hover .left:after, a:hover .top:after, a:hover .bottom:after, a:hover .right:after {
    border-top: 0.3em solid #e74c3c;
    border-right: 0.3em solid #e74c3c;
  }
  
  .left {
      display: inline-block;
      width: 3em;
      height: 3em;
      border: 0.3em solid #333;
      border-radius: 50%;
      /* margin-right: -3.5em; */
      /* margin-left: 0em; */
      /* margin: auto 0; */
  }
  
  .left:after {
      content: '';
      display: inline-block;
      margin-top: 0.7em;
      margin-left: 0.6em;
      width: 1.4em;
      height: 1.4em;
      border-top: 0.3em solid #333;
      border-right: 0.3em solid #333;
      -moz-transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
  }
  
  .right {
    display: inline-block;
    width: 3em;
    height: 3em;
    border: 0.3em solid #333;
    border-radius: 50%;
    margin-left: 40.1em;
  }
  
  .right:after {
    content: '';
    display: inline-block;
    margin-top: 0.7em;
    margin-left: -0.6em;
    width: 1.4em;
    height: 1.4em;
    border-top: 0.3em solid #333;
    border-right: 0.3em solid #333;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  
  .img {
      height:500px;
      width:500px;
      display:inline-block;
      position:absolute;
      left:14%;
  
  }
  </code></pre>
  
  <p>How can I make it work? What did I do wrong?</p>