Problem with my JS progress bar/inputs


#1

I’ve tried a lot of different things, and still I can’t fix this bug:

HTML

<div class="progress">
  <div class="progress-inner" id="progress"></div>
</div>
<input type="checkbox" class="check" id="one">
<label for="one" class="labels">#1</label>
<input type="checkbox" class="check" id="two">
<label for="two" class="labels">#2</label>
<input type="checkbox" class="check" id="three">
<label for="three" class="labels">#3</label>

CSS

.check {
  display: none;
}
label:before {
  content: "X";
}
.check:checked + label:before {
  content: ":)";
}
.progress {
  background: #000;
  height: 30px;
  width: 300px;
}
.progress-inner {
  height: 100%;
  width: 1px;
  background: #333;
}

JS

var checkboxes = document.getElementsByClassName("check");
var progressHTML = document.getElementById("progress");
var labels = document.getElementsByClassName("labels");
var numBoxesNotChecked = 0;
var numBoxesChecked = 0;

function checkstuff() {

  for (var i = 0; i < checkboxes.length; i++) {
    console.log(i);
    console.log(checkboxes[i])
    if (checkboxes[i].checked) {
      numBoxesNotChecked -= 1;
      console.log("1. Not checked " + numBoxesNotChecked);
    } else {
      numBoxesNotChecked += 1;
      console.log("2. Not checked " + numBoxesNotChecked);
    }
  }
  console.log("3. Not checked " + numBoxesNotChecked);
  if (numBoxesNotChecked === 3) {
    progressHTML.style.width = "1px";
  } else if (numBoxesNotChecked === 2) {
    progressHTML.style.width = "100px";
  } else if (numBoxesNotChecked === 1) {
    progressHTML.style.width = "200px";
  } else if (numBoxesNotChecked === 0) {
    progressHTML.style.width = "300px";
  }
}
for (var j = 0; j < labels.length; j++) {
  labels[j].addEventListener("click", function() {
    checkstuff();
  });
}
/*setInterval(function() {
   checkstuff();
}, 100);*/

checkstuff();

When the user clicks on the <label> I want the .progress-inner bar to grow, or shrink depending on whether the input is :checked or not. However, it is not working as expected, especially if you look at the console.

I don’t want any CSS styling btw, I’ll do that myself :slight_smile: Also, if I can avoid using jQuery, even better :slight_smile: