Tengo un problema con mi código JavaScript... Estoy desarrollando una "Lista de tareas pendientes", en la que puede agregar y eliminar elementos. Todas estas cosas ya funcionan, pero también me gusta tener un "contador" que muestra el número. (longitud) de todas las casillas de verificación sin marcar.
He creado un botón con JS:
let btn = document.createElement("button"); btn.classList.add("destroy");y ya guardé el lugar correcto para mostrar el número (longitud) para las casillas de verificación sin marcar:
let counter = document.getElementsByClassName("todo-count");y luego escribí un código para mostrarme las casillas sin hacer clic:
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; } }) } }Como ya se mencionó, agregar elementos ya funciona, pero tan pronto como agrego, por ejemplo, 5 elementos y el primer elemento (que, como todos los demás elementos, también tiene una casilla de verificación) se calcula como menos 5 en lugar de menos 1...
Solo cuente las casillas marcadas, no intente mantener el estado.
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>"... pero cuando hago clic en una casilla de verificación, el contador debe restar uno".
Necesitará otro detector de eventos para el evento de cambio. El evento de cambio se activa cuando el usuario cambia el valor de un control de formulario y luego hace clic en otro lugar (que es otro evento como desenfoque o enfoque).
Si aún no lo ha hecho, envuelva todo en un <form> para que pueda usar la interfaz HTMLFormElement . Es muy conciso y especializado para formularios y controles de formulario. Vincule su controlador de eventos al formulario para que pueda tener las ventajas que le dará la delegación de eventos , como escuchar eventos para una cantidad ilimitada de elementos, ya sean estáticos o agregados dinámicamente.
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>