In my code, I need to add the value of the specific checkbox that has been checked to the span element. The problem is it’s first clicks of the checkbox, the calculation goes wrong.
As you can see, if you click a checkbox for the first time, it substract the value instead of adding it. Is there something I forgot to add? My code is listed below. Thank you in advance
const s = document.querySelectorAll('#enroll-subject');
const cue = document.getElementById('cu');
let cu = parseInt(cue.textContent.replace('Current Units: ', '').trim());
s.forEach(cb => {
cb.addEventListener('change', updateTotalUnits);
});
function updateTotalUnits() {
let totalUnits = cu;
s.forEach(cb => {
if (cb.checked) {
console.log("checked");
totalUnits += parseInt(cb.value);
} else {
console.log("not checked");
totalUnits -= parseInt(cb.value);
}
});
cue.innerHTML = `Current Units: ${totalUnits}`;
} <div class="irreg-container" style="display:flex; flex-direction:column; text-align: center;">
<div class="header" style="display:flex; flex-direction:column;">
<span style="padding: 1em;" id="cu">Current Units: 15</span>
<span style="padding: .7em;font-size:1.3em;">Checkboxes</span>
</div>
<div class="subjects" style="display:flex; flex-direction: column;">
<table>
<tbody>
<tr>
<td style="width: 100%;">Checkbox 1</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
<tr>
<td style="width: 100%;">Checkbox 2</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
<tr>
<td style="width: 100%;">Checkbox 3</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
<tr>
<td style="width: 100%;">Checkbox 4</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
</tbody>
</table>
<div class="button-container" style="text-align: center;">
<button class="submit"> Submit </button>
</div>
</div>
</div>>Solution :
It makes no sense that you are looping over all checkboxes each time, and then subtract the value of those that are not checked – because you never added the values of those in the first place.
Just keep working with the current cu value, and then either add or subtract the value of the currently changed checkbox only.
const s = document.querySelectorAll('#enroll-subject');
const cue = document.getElementById('cu');
let cu = parseInt(cue.textContent.replace('Current Units: ', '').trim());
s.forEach(cb => {
cb.addEventListener('change', updateTotalUnits);
});
function updateTotalUnits() {
if (this.checked) {
console.log("checked");
cu += parseInt(this.value);
} else {
console.log("not checked");
cu -= parseInt(this.value);
}
cue.innerHTML = `Current Units: ${cu}`;
}<div class="irreg-container" style="display:flex; flex-direction:column; text-align: center;">
<div class="header" style="display:flex; flex-direction:column;">
<span style="padding: 1em;" id="cu">Current Units: 15</span>
<span style="padding: .7em;font-size:1.3em;">Checkboxes</span>
</div>
<div class="subjects" style="display:flex; flex-direction: column;">
<table>
<tbody>
<tr>
<td style="width: 100%;">Checkbox 1</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
<tr>
<td style="width: 100%;">Checkbox 2</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
<tr>
<td style="width: 100%;">Checkbox 3</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
<tr>
<td style="width: 100%;">Checkbox 4</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
</tbody>
</table>
<div class="button-container" style="text-align: center;">
<button class="submit"> Submit </button>
</div>
</div>
</div>