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 Also, if I can avoid using jQuery, even better