如何将计算得到的最终总价同步显示到HTML input标签中

云原生阿岚

2026-8-29

实现方法

仅需两步修改即可完成总价同步到input标签的需求：

第一步：新增价格展示input元素
在原有<div id="totalPrice" style="background:red;"></div>的相邻位置插入input标签，建议添加readonly属性避免用户随意篡改计算出的价格：
```
<input type="text" id="totalPriceInput" readonly>
```
如果需要允许用户手动调整价格，删除readonly属性即可

第二步：修改原有价格计算、初始化隐藏逻辑
找到代码中定义的calculateTotal和hideTotal两个函数，补充input元素的同步更新逻辑：

function calculateTotal()
{
  // 原有价格计算逻辑保留
  var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice() + insciptionPrice() + tenAnchorPrice * getAnchorQuantity();

  // 原有div价格展示逻辑保留
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "Total Price for the Cake $" + cakePrice;

  // 新增：同步更新input的显示值
  var priceInput = document.getElementById('totalPriceInput');
  priceInput.style.display = 'block';
  // 若需要带文字说明的展示用下面这行
  priceInput.value = "Total Price for the Cake $" + cakePrice;
  // 若只需要纯数字价格（比如用于表单提交），替换为下面这行即可，toFixed(2)是保留两位小数
  // priceInput.value = cakePrice.toFixed(2);
}

function hideTotal()
{
  // 原有div隐藏逻辑保留
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'none';
  // 新增：页面初始加载时同步隐藏价格input
  var priceInput = document.getElementById('totalPriceInput');
  priceInput.style.display = 'none';
}