I have a problem with my JavaScript Code... I'm developing a "ToDo-List", where you can add and remove Elements all of these things are already working but I also like to have an "counter" which shows the number (length) of all unchecked checkboxes.
I have created a button with JS:
let btn = document.createElement("button");
btn.classList.add("destroy");
and I already have saved the right place for show the number (length) for the unchecked checkboxes:
let counter = document.getElementsByClassName("todo-count");
and then i wrote code to show me the unclicked boxes:
for(let btn of buttons) {
if(btn.classList.contains("destroy")) {
btn.addEventListener("click", function() {
btn.parentElement.parentElement.remove();
for(let counts of counter) {
let parsed = parseInt(counts.innerText);
counts.innerText = parsed - 1;
}
})
}
}
As already mentioned, adding elements already works, but as soon as I add e.g. 5 elements and the first element (which, like all other elements, also has a checkbox) is calculated as minus 5 instead of minus 1...
Just count the checked checkboxes, do not try to maintain the state.
function updateCounts() {
const allCheckboxes = document.querySelectorAll(".my-class");
const checkedCheckboxes = document.querySelectorAll(".my-class:checked");
console.log("Checked count:", checkedCheckboxes.length);
console.log("Unchecked count:", allCheckboxes.length - checkedCheckboxes.length);
}
updateCounts();
document.querySelector("form").addEventListener("change", updateCounts);<form>
<input type="checkbox" class="my-class">
<input type="checkbox" class="my-class">
<input type="checkbox" class="my-class">
<input type="checkbox" class="my-class">
</form>"...but when I click a checkbox, the counter should subtract by one."
You'll need another event listener for the change event. The change event fires off when the user changes the value of a form control and then clicks elsewhere (which is another event like blur or focusout).
If you haven't already, wrap everything in a <form> so you can use the HTMLFormElement interface. It's very terse and specialized for forms and form controls. Bind your event handler to the form so you can have the advantages Event Delegation will give you like listening for events for an unlimited number of elements whether they are static or dynamically added.
const uncheckedCount = e => {
const io = e.currentTarget.elements;
const out = io.out;
if (e.target.name === 'btn' || e.type === 'change') {
const unchecked = [...io].filter(inp => inp.checked === false)
out.value = unchecked.length;
}
};
const ui = document.forms[0];
ui.addEventListener('change', uncheckedCount);
ui.addEventListener('click', uncheckedCount);<form>
<input type='checkbox' checked>
<input type='checkbox' checked>
<input type='checkbox'>
<input type='checkbox' checked>
<input type='checkbox'>
<input type='checkbox' checked>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox' checked>
<br>
<button name='btn' type='button'>GO</button>
<output name='out'></output>
</form>