How can I add 1% to the width of a div inside of a loop using only JS?-CodePudding

I've been trying to add 1% to the width of the div using JS. I want to make it so that the bar's width increases in a smooth way ( I thought about using animations but it didn't work cause I need to specify conditions).

window.onload = function(){
    for (let i = 0; i < 5; i  ) {
        const bar = document.querySelectorAll(".child-bar")[i];
        
        for (let j = 0; j < 82; j  ) {
            //alert("j"   j);
            console.log("bar width: "   bar.style.width)
            bar.style.width  = '1%';
        }
    }   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="skill">
   <label for="HTML">HTML</label>
     <div class="parent-bar">
        <span class="child-bar"></span>
          <h4>82%</h4>
     </div>
</div>

CodePudding user response：

Maybe this example will help you?

window.onload = function() {
  document.querySelectorAll(".parent-bar").forEach((el) => {
    const barNode = el.querySelector(".child-bar");
    const valueNode = el.querySelector("h4");
    const max = 82;
    const duration = 100;
    let value = 0;

    const tick = () => {
      barNode.style.width = `${value}%`;
      valueNode.innerHTML = `${value}%`;
      if (value   < max) setTimeout(tick, duration);
    }
    tick();
  })

}

.child-bar {
  display: block;
  background: black;
  height: 1rem;
  width: 0;
  transition: 0.1s 0s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="skill">
  <label for="HTML">HTML</label>
  <div class="parent-bar">
    <span class="child-bar"></span>
    <h4></h4>
  </div>
  <div class="parent-bar">
    <span class="child-bar"></span>
    <h4></h4>
  </div>
  <div class="parent-bar">
    <span class="child-bar"></span>
    <h4></h4>
  </div>
</div>

CodePudding user response：

Here's a solution with verbose code and commentary for clarity, using setInterval.
(Note that span elements have display: inline by default, which is why setting their width has no effect.)

// Sets options and calls main function
const myOptions = {
  MAX_WIDTH_PERCENT: 82,
  FRAME_COUNT: 100,
  FRAME_DURATION: 20
};
animateBars(myOptions);


// Defines main function
function animateBars(options){
  const  
    // Destructures options object to make local variables
    { MAX_WIDTH_PERCENT, FRAME_COUNT, FRAME_DURATION } = options,

    // Defines function to increment width
    increment = (value) => value  = MAX_WIDTH_PERCENT / FRAME_COUNT,

    // Defines function to update bar (after incrementing width)
    incrementAndupdateBar = (bar, oldWidth, timerId) => {
      newWidth = Math.min(increment(oldWidth), MAX_WIDTH_PERCENT);
      bar.style.width = newWidth   "%";
      bar.nextElementSibling.textContent = Math.floor(newWidth)   "%"; // (For demo)

      // Stops repeating the setInterval's function
      if(newWidth == MAX_WIDTH_PERCENT){
        clearInterval(timerId);
      }
      return newWidth; // Returns updated value
    };


  // Loops through bars
  for(let bar of document.querySelectorAll(".child-bar")){

    // Repeatedly updates current bar, keeping track of width as we go
    let
      width = 0, // Initializes width for the current bar
      timerId; // ID for use by setInterval & clearInterval

    timerId = setInterval( // (Returns an ID for later use)

      // Takes 2 args: a func and a duration (in ms) to delay inbetween
      function(){width = incrementAndupdateBar(bar, width, timerId);},
      FRAME_DURATION
    );
  }
}

.parent-bar{ width: 300px; border: 1px dotted grey; }
/* spans ignore "width" by default; "inline-block" solves this */
.child-bar{ display: inline-block; height: 1em; background-color: lightgreen; }
h4{ margin: 0; text-align: center; }

<div class="parent-bar">
  <span class="child-bar"></span>
  <h4></h4>
</div>