Problema: el valor predeterminado del botón de opción marcado se muestra en la aplicación, pero si cambio el valor de la sugerencia, luego deselecciono y vuelvo a seleccionar una casilla de verificación, vuelve al valor original del botón de opción marcado en lugar de cambiar al nuevo valor de la sugerencia.

Básicamente, el valor predeterminado de mi botón de selección de radio está establecido en $5 . Si selecciono una opción de casilla de verificación, luego cambio el valor de la propina a $2 , luego deselecciono una casilla de verificación, luego vuelvo a seleccionar una casilla de verificación, mostrará el valor de la propina como $5 en lugar de la nueva opción $2

Aquí está mi codepen. Agregué instrucciones en el codepen para que puedas ver mi problema.

https://codepen.io/jaysomo10/pen/dydaKwZ

Aquí está mi JS

 window.menuItems = 0; window.tips = 0; const foodTotal = document.getElementById("price"); const tipTotal = document.getElementById("tip"); const orderTotal = document.getElementById("total"); let tipVal = document.querySelector(".tips:checked").value; tipTotal.textContent = "$" + (tipVal / 100).toFixed(2); document.addEventListener("click", ({ target }) => { if (target.className === "food" && target.checked && tipVal) { window.menuItems += parseInt(target.value); window.tips = tipVal; } else if (target.className === "food" && !target.checked) { window.menuItems -= parseInt(target.value); } else if (target.className === "tips" && target.checked) { window.tips = parseInt(target.value); } else { return; } foodTotal.textContent = `$${(window.menuItems / 100).toFixed(2)}`; tipTotal.textContent = `$${(window.tips / 100).toFixed(2)}`; orderTotal.textContent = `$${( (Number(window.menuItems) + Number(window.tips)) / 100 ).toFixed(2)}`; });

Parece que no puedo convertir la lógica para hacer que el valor de la propina cambie después de anular la selección y volver a seleccionar una opción de casilla de verificación.