Home > Mobile >  How do I remove setInterval from progress bar in Javascript and make appear the VerticalBar instanta
How do I remove setInterval from progress bar in Javascript and make appear the VerticalBar instanta

Time:08-09

I have the classical Progress bar in Javascript. I Would like to simply place the vertical bar without seeing it moving on the screen.

function progressbar() {
      var vertical_bar2 = document.querySelector("#P5 .vl5");
      var element = document.getElementById("myprogressBar");
      var ValueSet = 25
      var width = 0;
    
      document.getElementById("vl5").style.display='';
      document.getElementById("value2").style.display='';
      document.getElementById("value1").style.display='';
      var identity = setInterval(scene, 10);
    
      function scene() {
        if (width >= ValueSet) {
          clearInterval(identity);
        } else {
          width  ;
          vertical_bar2.style.left = `${width}%`;
          document.getElementById("value2").innerHTML = ValueSet
        }
      }
    }

I am trying the following script but it is not working

function progressbar() {
      var vertical_bar2 = document.querySelector("#P5 .vl5");
      var element = document.getElementById("progressBar");
      var CE = 25
      var width = 0;
      document.getElementById("vl5").style.display='';
      document.getElementById("Value2").style.display='';
      document.getElementById("Value1").style.display='';
      vertical_bar2.style.left = 25;
      document.getElementById("Value").innerHTML = CE
    }

CodePudding user response:

Based on the code your provided, it looks like you just need to set a unit for the left property of your bar. Currently you are only setting a value (25), but without a unit (%, px, em, etc.) it will not apply anything.

vertical_bar2.style.left = "25%";

or

vertical_bar2.style.left = `${CE}%`;
  • Related