Add Progress Bar in Every Slide of the Carousel (JavaScript)-CodePudding

Have a Nice Saturday. I'm gonna ask something about adding progress bar in carousel which the progress bar code reference is in https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3. But after I apply it to my code, it doesn't work at all. It only showed that cannot set properties of undefined (setting 'width'). I'm very new in JavaScript, so please Help me to solve this everyone. Here's my snippet :

window.onload = function() {
  var slides = document.getElementsByClassName('carousel-item'),
      addActive = function(slide) {slide.classList.add('active-carousel')},
      removeActive = function(slide) {slide.classList.remove('active-carousel')},
      time = 3000,
      a = 0,
      timeLine = function() {if(a == 0) {a = 1; var elem = document.getElementsByClassName('progress-line'), width = 1, id = setInterval(frame,time/100); function frame() {if(width >= 100) {clearInterval(id); a = 0;} else {width  ; elem.style.width = width   "%";}}}}; //this one I'm not sure the code is right
      
  addActive(slides[0]);
  
  setInterval(function () {
    for (var i = 0; i < slides.length; i  ){
      if (i   1 == slides.length) {
        addActive(slides[0]);
        timeLine(slides[0]);
        slides[0].style.zIndex = 3;
        slides[i].classList.add('show-carousel');
        setTimeout(function() {
          slides[i].classList.remove('show-carousel');
        },1000);
        setTimeout(removeActive, 500, slides[i]);
        break;
      }
      
      if (slides[i].classList.contains('active-carousel')) { 
        slides[i].classList.add('show-carousel');
        timeLine(slides[i   1]);
        setTimeout(function() {
          slides[i].classList.remove('show-carousel');
        },1000);
        slides[i].removeAttribute('style');
        setTimeout(removeActive, 500, slides[i]);
        addActive(slides[i   1]);
        break;
      }
    } 
  }, time);
}

*{box-sizing: border-box;}
.carousel {
  position: relative;
  width: 400px;
  height: 270px;
  overflow: hidden;
}
.carousel-item {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

.progress-line {
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: black;
  z-index: 9;
}

.active-carousel {
  display: flex;
  animation-name: slide-in;
  animation-duration: 1s;
}

@keyframes slide-in {
  0% {display: none; bottom: 100%;}
  1% {display: flex; bottom: 100%;}
  100% {display: flex; bottom: 0%;}
}
.show-carousel {
  display: flex;
  animation-name: slide-out;
  animation-duration: 1.1s;
}

@keyframes slide-out {
  0% {display: flex; bottom: 0%;}
  99% {display: flex; bottom: -100%;}
  100% {display: none; bottom: -100%;}
}

div {height: 100%;}
  .red {background-color: red;}
  .green {background-color: green;}
  .yellow {background-color: yellow;}
  .violet {background-color: violet;}

<div >
  <div >
  </div>
  
  <div >
    <div ></div>
  </div>
  <div >
    <div ></div>
  </div>
  <div >
    <div ></div>
  </div>
  <div >
    <div ></div>
  </div>
</div>

CodePudding user response：

window.onload = function() {
  var slides = document.getElementsByClassName('carousel-item'),
      addActive = function(slide) {slide.classList.add('active-carousel')},
      removeActive = function(slide) {slide.classList.remove('active-carousel')},
      time = 3000,
      a = 0,
      timeLine = function() {if(a == 0) {a = 1; 
      let elem = document.querySelector('.progress-line');
      let width = 1;

      var id = setInterval(frame,time/100); 
      function frame() { if(width >= 100) { clearInterval(id); a = 0;} else {width  ; elem.style.width = width   "%";}}}}; 
      
  addActive(slides[0]);
  
  setInterval(function () {
    for (var i = 0; i < slides.length; i  ){
      if (i   1 == slides.length) {
        addActive(slides[0]);
        timeLine(slides[0]);
        slides[0].style.zIndex = 3;
        slides[i].classList.add('show-carousel');
        setTimeout(function() {
          slides[i].classList.remove('show-carousel');
        },1000);
        setTimeout(removeActive, 500, slides[i]);
        break;
      }
      
      if (slides[i].classList.contains('active-carousel')) { 
        slides[i].classList.add('show-carousel');
        timeLine(slides[i   1]);
        setTimeout(function() {
          slides[i].classList.remove('show-carousel');
        },1000);
        slides[i].removeAttribute('style');
        setTimeout(removeActive, 500, slides[i]);
        addActive(slides[i   1]);
        break;
      }
    } 
  }, time);
}

*{box-sizing: border-box;}
.carousel {
  position: relative;
  width: 400px;
  height: 270px;
  overflow: hidden;
}
.carousel-item {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

.progress-line {
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: black;
  z-index: 9;
}

.active-carousel {
  display: flex;
  animation-name: slide-in;
  animation-duration: 1s;
}

@keyframes slide-in {
  0% {display: none; bottom: 100%;}
  1% {display: flex; bottom: 100%;}
  100% {display: flex; bottom: 0%;}
}
.show-carousel {
  display: flex;
  animation-name: slide-out;
  animation-duration: 1.1s;
}

@keyframes slide-out {
  0% {display: flex; bottom: 0%;}
  99% {display: flex; bottom: -100%;}
  100% {display: none; bottom: -100%;}
}

div {height: 100%;}
  .red {background-color: red;}
  .green {background-color: green;}
  .yellow {background-color: yellow;}
  .violet {background-color: violet;}

<div >
  <div >
  </div>
  
  <div >
    <div ></div>
  </div>
  <div >
    <div ></div>
  </div>
  <div >
    <div ></div>
  </div>
  <div >
    <div ></div>
  </div>
</div>

var not work inside of function use let