Question 208622 in Html Question posted in
Some basic documentation can be found here.

Html – Construct a progress bar for many elements

I don’t know how implement and call my functions in a way that my progress bar be completed when I click in the button that I define to execute my function

I just want to know how I can make my code just run over and over until a condition be satisfied.

const linhasProgresso = document.querySelectorAll('.linha')
linhasProgresso.forEach((linhaProgresso, index) => {
  if (index < controle) {
    setInterval(progressoPositivo(linhaProgresso), 10)
  } else {
    setInterval(progressoNegativo(linhaProgresso), 10)
  }

})

function progressoPositivo(elem) {
  if (width < 100) {
    width++
    elem.style.width = width + '%';
  }
}

function progressoNegativo(elem) {
  if (width > 0) {
    width--
    elem.style.width = width + '%';
  }
}

I think that my problem occurs when I call my functions. I want it to be so that my progress bar be with width = 100% when I click on my button just one time.

Tags:

3

Answers


  1. 0

    The HTML progress bar should have a set width and its percentage should be expressed in the value attribute. Rather than change the size of the progress bar (an element which contains a graphical representation of the percentage), you should merely change the percentage the progress bar shows using the value attribute.

    Instead of changing progressbar.style.width, you should set the width at the outset and never change it (outside of a resize event) and use the progressbar.value to express how much actual progress has been carried out.

    Login or Signup to reply.
  2. 0

    how I can make my code just run over and over until a condition be satisfied

    You need to capture the return value of setInterval so that you can call clearInterval to stop the process (see here). The best way is to pass an anonymous function that checks if the process is complete. Your progresso* functions should return a value indicating whether or not, the process is complete.

    const controle = 2
const linhasProgresso = document.querySelectorAll('.linha')
linhasProgresso.forEach((linhaProgresso, index) => {
  console.log(controle, index)
  const func = (index < controle) ? progressoPositivo : progressoNegativo;
  const cycle = setInterval(() => {
    if (func(linhaProgresso))
      clearInterval(cycle)
  }, 10)
})

function progressoPositivo(elem) {
  let width = parseInt(elem.style.width)
  console.log(elem.style.width, 'Positivo')
  if (width < 100) {
    width++
    elem.style.width = width + '%';
    return false // not done
  }
  return true // done
}

function progressoNegativo(elem) {
  let width = parseInt(elem.style.width)
  console.log(elem.style.width, 'Negativo')
  if (width > 0) {
    width--
    elem.style.width = width + '%';
    return false
  }
  return true
}
    .linha {
  height: 1em;
  background: green;
  margin: .25em;
}
    <div class="container">
  <div class="linha" style="width: 0;"></div>
  <div class="linha" style="width: 0;"></div>
  <div class="linha" style="width: 100%;"></div>
</div>
    Login or Signup to reply.
  3. 0

    If you are just toggling one step at a time, consider using a css transition for a much cleaner solution that runs smoother.

    let controle = 0
const linhasProgresso = document.querySelectorAll('.linha')
const nextBtn = document.querySelector('button.next')
nextBtn.addEventListener('click', e => {
  controle++
  linhasProgresso.forEach((linhaProgresso, index) => {
    if (index < controle) {
      linhaProgresso.classList.add('done')
    } else {
      linhaProgresso.classList.remove('done')
    }
  })
})
    .linha {
  width: 0;
  height: 1em;
  background: green;
  margin: .25em;
  transition: all 1s;
}

.linha.done {
  width: 100%;
}
    <div class="container">
  <div class="linha"></div>
  <div class="linha"></div>
  <div class="linha"></div>
  <div class="linha"></div>
  <div class="linha"></div>
  <div class="linha"></div>
  <div class="linha"></div>
</div>

<button class="next">next</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search