CODEWITHSUNDEEP
javascriptecmascript-6progress-bar
mckeever02
mckeever02

Reputation: 751

Updating width on progress bar when checkbox checked/unchecked

What I'm trying to do

Increase or decrease the progress bar by a value percentage everytime a checkbox in the list is checked or unchecked.

For instance, if there are two checkboxes in the list, then the bar should increase or decrease by 50% when a checkbox is checked/unchecked. If there are 4 checkboxes, then 25% etc etc.

What's working

I can set the percentage that the bar needs to increase/decrease by ok. And I can get the progress to change width to e.g. 50% on first check of a checkbox.

What's not working:

I can't figure out how to increase/decrease the progress by the checklistProgressInterval percentage amount each time. For instance, if the value is 50%, then the progress should increase by 50% each time a checkbox is checked and decrease by 50% when unchecked.

I can get it to increase to 50% but not by 50%. The += just seems to increase it by 1% after each check.

Could anyone help me out with what I'm doing wrong? Thanks

let checklistItems = document.querySelectorAll('.list--checklist__item'),
    checklistProgressBar = document.querySelector('.progress-bar--checklist .progress-indicator'),
    checklistLen = checklistItems.length,
    checklistProgressInterval = 100 / checklistLen;

checklistItems.forEach((checklistItem) => {
    let checklistInput = checklistItem.querySelector('.input--checklist__input'),
        checklistContainer = checklistItem.querySelector('.input--checklist__container'),
        checklistText = checklistItem.querySelector('.list--checklist__item--text');
    checklistContainer.addEventListener('click', () => {
        if (checklistInput.checked == true) {
            checklistItem.classList.add('finished');
            checklistProgressBar.style.width += `${checklistProgressInterval}%`;
        } else {
            checklistItem.classList.remove('finished');
            checklistProgressBar.style.width -= `${checklistProgressInterval}%`;
        }
    })
});

Upvotes: 0

Views: 919

Answers (1)

Mariusz
Mariusz

Reputation: 361

My guess is that you are doing += wrong

Afaik, you can't add width to the style, since you are using a string. You need to calculate it beforehand and assign a variable.

Also make sure your progress bar parent has a width, like 100px.

Check this example:

So instead of 0% and 50% add a variable here and calculate the % before you assign it.

function checkMe() {
  const checkBoxes = document.querySelectorAll(".myCheckBox");
  const progress = document.querySelector(".progress-inner");
  const checklistProgressInterval = 100 / checkBoxes.length;
  let width = 0;
  
  for(let i = 0; i < checkBoxes.length; i++){
    if(checkBoxes[i].checked){
      width += checklistProgressInterval;
    }
  }
  
    progress.style.width = `${width}%`;
}
.progress{
  width: 150px;
  height: 20px;
  background-color: #333;
  border: 1px solid black;
  }

.progress-inner{
  background-color: #f7f;
  width: 0%;
  height: 100%;
  }
<div class="progress">
  <div class="progress-inner"></div>
</div>

<input class="myCheckBox" type="checkbox" onclick="checkMe()" />
<input class="myCheckBox" type="checkbox" onclick="checkMe()" />
<input class="myCheckBox" type="checkbox" onclick="checkMe()" />
<input class="myCheckBox" type="checkbox" onclick="checkMe()" />
<input class="myCheckBox" type="checkbox" onclick="checkMe()" />

Upvotes: 2

Related Questions