如何实现披萨菜单应用中按钮对应金额的累加及总价展示功能？

原代码的核心问题 #

• 错误覆盖DOM元素引用：先获取了#total的DOM元素，随后totalField = 0把这个引用替换成了数字，导致后续无法操作页面元素
• 事件监听参数错误：addEventListener的事件类型需要是字符串"click"，而非未定义的变量click
• 总价更新逻辑错误：试图给数字变量调用value属性，并且错误地创建列表项追加到总价区域，没有正确更新总价显示
• 仅绑定了一个按钮的事件，其他 crust 按钮无响应

修正后的完整代码 #

HTML 部分 #

<h1>PIZZA SUPREME</h1>
<h2>Select a crust and toppings to build your own pizza!</h2>
<h3>Crust</h3>
<h4>$10 per crust.</h4>
<ul><button class="crust-btn" id="white-wheat">white wheat</button></ul>
<ul><button class="crust-btn" id="multi-grain">multigrain</button></ul>
<ul><button class="crust-btn" id="cauliflower">Cauliflower</button></ul>
<ul><button class="crust-btn" id="thin-crust">Thin Crust</button></ul>
<ul><button class="crust-btn" id="deep-dish">Deep Dish</button></ul>

<h2>Total:</h2>
<div id="total">$0</div>

JavaScript 部分 #

// 获取总价显示元素和所有 crust 按钮
const totalElement = document.getElementById("total");
const crustButtons = document.querySelectorAll(".crust-btn");

// 初始化总价
let totalCost = 0;

// 给每个 crust 按钮绑定点击事件
crustButtons.forEach(button => {
  button.addEventListener("click", () => {
    // 累加10美元
    totalCost += 10;
    // 更新页面上的总价显示
    totalElement.textContent = `$${totalCost}`;
  });
});

代码说明 #

• 新增统一的类名.crust-btn，方便批量获取所有 crust 按钮，避免重复获取单个元素
• 分离了总价变量totalCost和DOM元素totalElement，避免覆盖引用
• 使用querySelectorAll批量获取按钮，通过forEach统一绑定事件，代码更简洁
• 点击按钮时直接更新总价区域的文本内容，实现实时显示

内容的提问来源于stack exchange，提问作者Thabo