interval can't be reset after click

Question

What I'm trying to accomplish is, when I click on the left button or right button, I want the interval to start-over, even though I clear it, it stays. Here's the code and JSFiddle to see the problem:

JSFiddle

https://jsfiddle.net/9hvL719s/2/

HTML:

<div id="hero">
    <span id="left"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
    <span id="right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
    <div id="slider_container" style="width : 400%; margin-left:0;">
        <div class="slider_item" style="background-color : #c612d2;">
            <div class="hero_text">
                <h1>Some text for testing purposes</h1>
                <h3>This is is just a dummy text for demonstration shown a subtitle</h3>
            </div>
        </div>
        <div class="slider_item" style="background-color: #1294d2;">
            <div class="hero_text">
                <h1>Some text for testing purposes</h1>
                <h3>This is is just a dummy text for demonstration shown a subtitle</h3>
            </div>
        </div>
        <div class="slider_item" style="background-color: #d21262;">
            <div class="hero_text">
                <h1>Some text for testing purposes</h1>
                <h3>This is is just a dummy text for demonstration shown a subtitle</h3>
            </div>
        </div>
        <div class="slider_item" style="background-color: #ff4d4d;">
            <div class="hero_text">
                <h1>Some text for testing purposes</h1>
                <h3>This is is just a dummy text for demonstration shown a subtitle</h3>
            </div>
        </div>
    </div>
    <div class="cercles">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

CSS

* {
  font-family : sans-serif;
}
#hero {
  width : 90%;
  height : 300px;
  background-color : #777eee;
  margin : 30px auto;
  overflow : hidden;
  position : relative;
}
span#right {
  right : 0;
}
span#left {
  left : 0;
}
#hero > span {
  display : block;
  position : absolute;
  top : 0;
  bottom : 0;
  margin : auto;
  width : 50px;
  height : 70px;
  background-color : rgba(0,0,0,0.5);
  cursor : pointer;
  z-index : 10;
  color : #fff;
  font-size : 20px;
  box-sizing : border-box;
  padding : 25px 17px;
}
#hero > span:hover {
  background-color: rgba(0,0,0,1);
}
div#slider_container {
  height : 100%;
  font-size : 0;
  transition: margin-left 1s cubic-bezier(0.15, 0.75, 0.5, 1);
}
div.slider_item {
  width : 25%;
  height : 100%;
  display : inline-block;
  position : relative;
}
div.slider_item > div.hero_text {
  position : absolute;
  bottom : 15%;
  left : 15%;
  color : #fff;
}

div.hero_text > h1 {
  font-size : 24px;
}
div.hero_text > h3 {
  font-size : 14px;
}

div#hero > div.cercles {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    width: 120px;
    bottom: 10%;
}
div#hero > div.cercles > span {
    width: 15px;
    height: 15px;
    margin: 0 5px;
    display: inline-block;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    cursor: pointer;
}
div#hero > div.cercles > span:hover {
    background-color: #fff;
}

JavaScript

var leftBtn = document.getElementById("left"),
    righBtn = document.getElementById("right"),
    sldierContainer = document.getElementById("slider_container"),
    sliderItem =  document.getElementsByClassName("slider_item");

function goLeft (){
    if (parseInt(sldierContainer.style.marginLeft) == 0){
      sldierContainer.style.marginLeft = -(sliderItem.length-1)*100 + "%";
    } else {
      sldierContainer.style.marginLeft = (parseInt(sldierContainer.style.marginLeft)+100) + "%";
    }
}

function goRight (){
    if (-parseInt(sldierContainer.style.marginLeft) >= (sliderItem.length-1)*100){
      sldierContainer.style.marginLeft = 0;
    } else {
      sldierContainer.style.marginLeft = (parseInt(sldierContainer.style.marginLeft)-100) + "%";
    }
}

var goRightInterval = setInterval(goRight,7000);

leftBtn.addEventListener('click',function(){
  goLeft();
  clearInterval(goRightInterval);
  var goRightInterval = setInterval(goRight,7000);
});

righBtn.addEventListener('click',function(){
  goRight();
  clearInterval(goRightInterval);
  var goRightInterval = setInterval(goRight,7000);
});

Answer 1

I think you're issue is due to re-declaring the var goRightInterval.

The statement inside your event handlers var goRightInterval = setInterval(goRight,7000); should instead be goRightInterval = setInterval(goRight,7000);

Answer 2

leftBtn.addEventListener('click',function(){
  goLeft();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(goRight,3000);
});

righBtn.addEventListener('click',function(){
  goRight();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(goRight,3000);
});

You are redeclaring goRightInterval as vars. You want to return to the global scope, so just remove the var declaration.

Answer 3

You define interval as local variables to click functions, just do this:

var goRightInterval = setInterval(function(){goRight()},7000);

leftBtn.addEventListener('click',function(){
  goLeft();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(function(){goRight()},7000);
});

righBtn.addEventListener('click',function(){
  goRight();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(function(){goRight()},7000);
});

Answer 4

remove the var like this :

var goRightInterval = setInterval(goRight,7000);

leftBtn.addEventListener('click',function(){
  goLeft();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(goRight,7000);
});

righBtn.addEventListener('click',function(){
  goRight();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(goRight,7000);
});