title: onClick and onLoad change to addEventListener
body: <p>html file:</p>
  
  <pre><code>&lt;!doctype html&gt;
      &lt;html&gt;
          &lt;head&gt;
              &lt;meta charset = "utf-8"&gt;
              &lt;title&gt;Image Slider&lt;/title&gt;
              &lt;link href = "slider.css" rel = "stylesheet" type = "text/css"&gt; //link to css file
              &lt;script src = "slider.js"&gt;&lt;/script&gt;  //link to js file
          &lt;/head&gt;
  
          &lt;body onLoad = "photoA()"&gt;      //change to addEventListener
              &lt;div id = "slider"&gt;
                  &lt;img src = "Images/img1.jpg" id = "image" &gt;
                  &lt;div class = "left_hold"&gt;&lt;img onClick = "photo(-1)" class = "left" src = "Images/arrow_left.png"&gt;&lt;/div&gt;     //change to addEventListener
                  &lt;div class = "right_hold"&gt;&lt;img onClick = "photo(1)" class = "right" src = "Images/arrow_right.png"&gt;&lt;/div&gt;     //change to addEventListener
              &lt;/div&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>css file:
  //styling web</p>
  
  <pre><code>*{
      margin:0px;
  }
  
  #slider {
      height:400px;
      width:650px;
      margin: 50px auto;
      position:relative;
      border-radius:4px;
      overflow:hidden;
  }
  
  #image {
      height:400px;
      width:650px;
      position:absolute;
  }
  
  .left_hold {
      height: 400px;
      width: 100px;
      position: absolute;
      top: 0px;
      left: 0px;
  }
  
  .right_hold {
      height: 400px;
      width: 100px;
      position: absolute;
      top: 0px;
      right: 0px;
  }
  
  .left {
      height:50px;
      width:50px;
      position:absolute;
      top:40%;
      left:20px;
      opacity:0;
      transition: all .2s ease-in-out 0s;
  }
  
  .right {
      height:50px;
      width:50px;
      position:absolute;
      top:40%;
      right:20px;
      opacity:0;
      transition: all .5s ease-in-out 0s;
  }
  
  .left_hold:hover .left {
      opacity:0.6;
  }
  
  .right_hold:hover .right {
      opacity:0.6;
  }
  
  .left:hover .left1
  </code></pre>
  
  <hr>
  
  <p>javascript file:</p>
  
  <pre><code>    var imageCount = 1;
      var total = 6;
  
      function photo(x) {
          var image = document.getElementById('image');
          imageCount = imageCount + x;
  
          if(imageCount &gt; total){imageCount = 1;}
          if(imageCount &lt; 1){imageCount = total;} 
          image.src = "Images/img"+ imageCount +".jpg";
          clearInterval(time);                                
          time =  window.setInterval(function photoA() {      
  
  
          var image = document.getElementById('image');
          imageCount = imageCount + 1;      //adding image 
  
          if(imageCount &gt; total){imageCount = 1;}
          if(imageCount &lt; 1){imageCount = total;} 
          image.src = "Images/img"+ imageCount +".jpg";
          },2000);         //time interval
          }
  
          var time = window.setInterval(function photoA() {    
  
          var image = document.getElementById('image');
          imageCount = imageCount + 1;
  
          if(imageCount &gt; total){imageCount = 1;}
          if(imageCount &lt; 1){imageCount = total;} 
          image.src = "Images/img"+ imageCount +".jpg";
          },2000);
  </code></pre>
  
  <hr>
  
  <p>Anyone can explain to me how to change the onLoad and onClick to addEventListener?
  Do I need to change all the code again?
  Or there is any simpler ways to do image slider without using jquery?</p>