Así que tengo este detector de eventos simple que actualiza mi precio cuando hago clic en una casilla de verificación.
Sin embargo, no veo cómo puedo refactorizar mi lógica para que reste el precio después de desmarcar una casilla de verificación.
let items = 0; document.addEventListener("click", (e) => { if (e.target.matches("input[type=checkbox]")) { items += +e.target.value; console.log(items); document.getElementById("price").textContent = `Food Total: $${( items / 100 ).toFixed(2)}`; } });Hasta ahora, este código agrega todos los valores de mis casillas de verificación, pero si continúo haciendo clic y sin hacer clic en ellas, aún agregan el valor al infinito
¿Quizás pueda agregar una clase "marcada" al hacer clic en la casilla de verificación y eliminarla al hacer clic nuevamente? Entonces podría trabajar con la clase en lugar del evento de clic sin formato.
Agregaría las casillas marcadas a un Conjunto y las agregaría/eliminaría del Conjunto al hacer clic. Compruebe si ya están en el conjunto para determinar si necesita sumar o restar de la suma.
const clickedCheckboxes = new Set(); let sum = 0; const priceDiv = document.getElementById("price"); document.addEventListener("click", ({ target }) => { if (!target.matches("input[type=checkbox]")) { return; } if (clickedCheckboxes.has(target)) { clickedCheckboxes.delete(target); sum -= target.value; } else { clickedCheckboxes.add(target); sum += Number(target.value); } priceDiv.textContent = `Food Total: $${(sum / 100).toFixed(2)}`; });Creo que las casillas de verificación deberían tener un valor booleano simple de .checked, ya sea verdadero o falso: https://www.w3schools.com/jsref/prop_checkbox_checked.asp
Eso podría permitirle disminuir si .checked === false