no actualiza el total del pedido

Porque no hay código para hacer eso. Esto es lo que hace el código cuando hace clic en un botón de "consejo":

 tip = event.target.value; document.getElementById("tip").textContent = `Tip: $${tip}`;

Como puede ver, nada en esta operación afecta el orderTotal o la visualización de ese total. También puede actualizarlos escribiendo código para actualizarlos:

 // update tip tip = event.target.value; document.getElementById("tip").textContent = `Tip: $${tip}`; // update total // with calculations because your other values are multiplied by 100 for some reason document.getElementById("total").textContent = `Your order total is: $${( (orderTotal + (tip * 100)) / 100 ).toFixed(2)}`;

Algunas notas adicionales...

• Su función updateTotal vuelve a vincular los controladores de clics con document.addEventListener cada vez que se ejecuta. Probablemente esto no sea lo que desea y puede generar errores. Separe el enlace de los controladores de eventos de la lógica ejecutada por esos controladores.
• Los valores que se utilizan están prácticamente garantizados para causar confusión en algún momento. Elige un estándar y apégate a él. ¿Los valores están en "dólares" o en "centavos"? Si se apega a un estándar, no tendrá que seguir ensuciando el código con operaciones * 100 y / 100 solo para que funcione.
• Para algunos elementos tiene atributos onClick en línea, para otros está usando document.addEventListener . ¿Por qué hacerlos diferentes? Elija uno (idealmente el último) y sea coherente con él, de lo contrario, es probable que se confunda.

Lea más sobre let
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
Está definiendo una variable de alcance dentro de la función y cuando hace clic en el botón no funciona porque no hay ningún evento para llamar a la función.
Después de eso, puede definir un objeto fuera de la función que almacene sus datos cuando desee llamar a la función de diferentes maneras.

 let data = { items: 0, tip: 0 }; const buttons = document.querySelectorAll("input[type=button]"); buttons.forEach((b) => { b.addEventListener("click", (event) => { if (event.target.matches("input[type=button]")) { data.tip = parseInt(event.target.value); document.getElementById("tip").textContent = `Tip: $${data.tip}`; showPrice(); } }); }); function updatePrice() { data.items = 0; document.querySelectorAll("input[type=checkbox]").forEach((checkBox) => { if (checkBox.checked) { data.items += +checkBox.value; showPrice(); } }); } function showPrice() { //Calculating Totals let orderTotal = data.items + data.tip; document.getElementById("price").textContent = `Food Total: $${( data.items / 100 ).toFixed(2)}`; document.getElementById("total").textContent = `Your order total is: $${( orderTotal / 100 ).toFixed(2)}`; }

• HTML: se cambió en lugar del botón de opción de tipo de entrada usado.
• Javascript: se utilizó el mismo método que la casilla de verificación para la lógica del botón de opción.

 function updatePrice() { //Adding Food let items = 0; document.querySelectorAll("input[type=checkbox]").forEach((checkBox) => { if (checkBox.checked) { items += +checkBox.value; } }); //Adding Tip document.querySelectorAll("input[type=radio]").forEach((radioBox) => { if (radioBox.checked) { items += +radioBox.value; } }); //Calculating Totals let orderTotal = items; document.getElementById("price").textContent = `Food Total: $${( items / 100 ).toFixed(2)}`; document.getElementById("total").textContent = `Your order total is: $${( orderTotal / 100 ).toFixed(2)}`; }

 <div class="menu-items"> <h2>Order Details</h2> <div> <input type="checkbox" name="item1" value="1000" onChange="updatePrice()"> <label for="item1">12 piece wings $10</label> </div> <div> <input type="checkbox" name="item2" value="700" onChange="updatePrice()"> <label for="item2">6 piece wings $7</label> </div> <div> <input type="checkbox" name="item3" value="300" onChange="updatePrice()"> <label for="item3">Large fries $3</label> </div> </div> <div class="payment"> <h2>Payment Summary</h2> <p id="price">Food Total: $0.00</p> <p id="fee">Delivery Fee $0.00</p> <p id="tip">Tip: $0.00</p> <input type="radio" name="tip" value="300" onChange="updatePrice()"> 3 <input type="radio" name="tip" value="500" onChange="updatePrice()"> 5 <input type="radio" name="tip" value="1000" onChange="updatePrice()"> 10 <p id="total">Your order total is: $0.00</p> </div>