Q:

How to target different element that has same index with pure javascript

I want to make a simple slider using pure javascript that support at least ie8, but got stuck at the moment.  The problem is I when I click one of the paging items it should grab current index and then target another div for the slider container item with the same index as the paging.  Basically I want to add and remove active class on both div.sliderItems & div.pagingItems based on div.pagingItems index.  Here's my code:

window.onload = function(){
    var slider = document.getElementById('slider'),
      sliderItems = slider.children,
      totalItems = sliderItems.length,
      activeSlider = document.querySelector('.activeSlider'),
      pagingSlider = document.getElementById('pagingSlider'),
      pagingItems = pagingSlider.children,
      activePaging = document.querySelector('.activePaging');

    function next(){
      for (var i = 0; i < totalItems; i++) {
        if (i < totalItems - 1) {
          if (sliderItems[i].className.match( /(?:^|\s)activeSlider(?!\S)/ )) {
            sliderItems[i].className = sliderItems[i].className.replace( /(?:^|\s)activeSlider(?!\S)/g , '' );
            sliderItems[i + 1].className += ' activeSlider';

            pagingItems[i].className = pagingItems[i].className.replace( /(?:^|\s)activePaging(?!\S)/g , '' );
            pagingItems[i + 1].className += ' activePaging';
            return;
          }
        } else {
          sliderItems[i].className = sliderItems[i].className.replace( /(?:^|\s)activeSlider(?!\S)/g , '' );
          sliderItems[i + 1 - totalItems].className += ' activeSlider';

          pagingItems[i].className = pagingItems[i].className.replace( /(?:^|\s)activePaging(?!\S)/g , '' );
          pagingItems[i + 1 - totalItems].className += ' activePaging';
          return;
        }
      }
    }

    for (var i = 0; i < totalItems; i++) {
    (function(index){
     pagingItems[i].onclick = function(){
      pagingItems[i].className = pagingItems[i].className.replace( /(?:^|\s)activePaging(?!\S)/g , '' );
      this.className += ' activePaging';
      console.log(index);
     }    
    })(i);
   }
   
   if (activeSlider === null) {
    sliderItems[0].className += ' activeSlider';
    pagingItems[0].className += ' activePaging';
   }
   
   var start = setInterval(next, 3000);
   
   pagingSlider.onmouseenter = function(){clearInterval(start);};
   pagingSlider.onmouseleave = function(){start = setInterval(next, 3000);};
  }
* {
  box-sizing: border-box;
}
html, body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}
.wrapperSlider {
  position: relative;
  width: 100%;
  padding-bottom: 35%;
}
#slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#slider > * {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  background: red;
  opacity: 0;
  transition: all ease-in-out .5s;
}
#slider > * > * {
  display: table-cell;
  vertical-align: middle;
}
#slider > *.activeSlider {
  z-index: 1;
  background: green;
  opacity: 1;
}
.wrapperPaging {
  text-align: center;
}
#pagingSlider {
  display: inline-block;
  font-size: 0;
}
#pagingSlider > * {
  display: inline-block;
  margin: 0 10px;
  font-size: 14px;
  color: black;
  cursor: pointer;
  transition: all ease-in-out .5s;
}
#pagingSlider > *.activePaging {
  color: red;
  cursor: default;
}
<! DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Test File | Vanilla JS</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
 </head>
 <body>
 
  <div class="wrapperSlider">
   <div id="slider">
    <div class="sliderItems">
     <div>Item 1</div>
    </div>
    <div class="sliderItems">
     <div>Item 2</div>
    </div>
    <div class="sliderItems">
     <div>Item 3</div>
    </div>
    <div class="sliderItems">
     <div>Item 4</div>
    </div>
    <div class="sliderItems">
     <div>Item 5</div>
    </div>
   </div>
  </div>
  
  <div class="wrapperPaging">
   <div id="pagingSlider">
    <a class="pagingItems">1</a>
    <a class="pagingItems">2</a>
    <a class="pagingItems">3</a>
    <a class="pagingItems">4</a>
    <a class="pagingItems">5</a>
   </div>
  </div>
  
 </body>
</html>

A:

Your onclick function has a closure around the i loop counter, which is causing the "classic" closure bug of all of your event handlers sharing the same value for i and i persisting after its defining scope has ended.  At that point, i has the last value set by the loop, which is one more than the number of actual items there are, so when the time comes to click on your slider, no matter which number you click on, you get the same i value that is one more than the highest index used.  While your code was set up to avoid this problem by using an immediately invoked function expression that passes itself a copy of i, which it receives as index, your nested onclick functions ignored that and used i anyway.  You could just change references to i with index.  But, changing the pageSlider[i] reference to this solves the issue as well and doesn't rely on the IIFE. 
A couple of other small pieces of advice...
An <a> is only valid when it has a name or href attribute and, in your case, you really aren't trying to navigate anywhere, so the <a> tag is inappropriate for what you are doing.  In my example below, I've changed those to <span> elements, which is more appropriate. 
Instead of working with the className property, it is simpler (and less error prone) to use classList, which provides .add(), remove() and toggle() and methods.  When you use .add(), you don't have to worry about prepending a space in situations when there will be more than one class applied.  And, most importantly, you can easily remove a class without regular expressions and String.replace(). 

window.onload = function(){
  var slider = document.getElementById('slider'),
      sliderItems = slider.children,
      totalItems = sliderItems.length,
      activeSlider = document.querySelector('.activeSlider'),
      pagingSlider = document.getElementById('pagingSlider'),
      pagingItems = pagingSlider.children,
      activePaging = document.querySelector('.activePaging');

  function next(){
    for (var i = 0; i < totalItems; i++) {
      if (i < totalItems - 1) {
        if (sliderItems[i].className.indexOf('activeSlider') > -1) {
          sliderItems[i].classList.remove('activeSlider');
          sliderItems[i + 1].classList.add('activeSlider');

          pagingItems[i].classList.remove('activePaging');
          pagingItems[i + 1].classList.add('activePaging');
        }
      } else {
        sliderItems[i].classList.remove('activeSlider');
        sliderItems[i + 1 - totalItems].classList.add('activeSlider');

        pagingItems[i].classList.remove('activePaging');
        pagingItems[i + 1 - totalItems].classList.add('activePaging');
      }
    }
  }

  for (var i = 0; i < totalItems; i++) {
    pagingItems[i].onclick = function(){     
      // You were forming a closure around i in this function.  You can reference
      // the element that triggered the event simply with "this"
      this.previousElementSibling.classList.remove('activePaging');
      this.classList.add('activePaging');
    }    
  }
   
  if (activeSlider === null) {
   sliderItems[0].classList.add('activeSlider');
   pagingItems[0].classList.add('activePaging');
  }
   
  var start = setInterval(next, 3000);
   
  pagingSlider.onmouseenter = function(){clearInterval(start);};
  pagingSlider.onmouseleave = function(){start = setInterval(next, 3000);};
}
* {
  box-sizing: border-box;
}
html, body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}
.wrapperSlider {
  position: relative;
  width: 100%;
  padding-bottom: 35%;
}
#slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#slider > * {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  background: red;
  opacity: 0;
  transition: all ease-in-out .5s;
}
#slider > * > * {
  display: table-cell;
  vertical-align: middle;
}
#slider > *.activeSlider {
  z-index: 1;
  background: green;
  opacity: 1;
}
.wrapperPaging {
  text-align: center;
}
#pagingSlider {
  display: inline-block;
  font-size: 0;
}
#pagingSlider > * {
  display: inline-block;
  margin: 0 10px;
  font-size: 14px;
  color: black;
  cursor: pointer;
  transition: all ease-in-out .5s;
}
#pagingSlider > *.activePaging {
  color: red;
  cursor: default;
}
<! DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Test File | Vanilla JS</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
 </head>
 <body>
 
  <div class="wrapperSlider">
   <div id="slider">
    <div class="sliderItems">
     <div>Item 1</div>
    </div>
    <div class="sliderItems">
     <div>Item 2</div>
    </div>
    <div class="sliderItems">
     <div>Item 3</div>
    </div>
    <div class="sliderItems">
     <div>Item 4</div>
    </div>
    <div class="sliderItems">
     <div>Item 5</div>
    </div>
   </div>
  </div>
  
  <div class="wrapperPaging">
   <div id="pagingSlider">
    <span class="pagingItems">1</span>
    <span class="pagingItems">2</span>
    <span class="pagingItems">3</span>
    <span class="pagingItems">4</span>
    <span class="pagingItems">5</span>
   </div>
  </div>
  
 </body>
</html>

