表单选择数量后只读文本框无法显示计算总价，求问题排查

你遇到的核心问题是错误地使用了innerHTML来设置input文本框的内容——对于<input type="text">这类表单控件，它的显示内容是通过value属性来控制的，而innerHTML只适用于设置包含子元素的标签（比如<div>、<span>）的内部HTML内容。

修正后的核心代码 #

把你的calculatePrice函数里的这一行：

document.getElementById("total_price").innerHTML = "Total price: \u20AC " + totalprice;

改成：

document.getElementById("total_price").value = "Total price: \u20AC " + totalprice;

额外的优化建议 #

• 修正表单元素引用：你的select标签name是numberselect，但代码里用了form.elements.number_select，这里会因为name不匹配导致获取值的逻辑不够严谨。直接通过id获取select的值更可靠：

  var num_pieces = parseInt(document.getElementById('number_select').value);
  

• 格式化货币小数位数：计算总价时建议保留两位小数，符合货币显示规范：

  var totalprice = (price_for_1 * num_pieces).toFixed(2);
  

• 初始化总价显示：页面加载时主动调用一次calculatePrice()，让用户一开始就能看到默认数量的总价，无需等待选择操作：

  // 页面加载完成后初始化
  window.onload = function() {
    calculatePrice();
  };
  

完整修正后的函数示例 #

function calculatePrice() {
  var num_pieces = parseInt(document.getElementById('number_select').value);
  var price_for_1 = 9.90;
  var totalprice = (price_for_1 * num_pieces).toFixed(2);
  document.getElementById("total_price").value = "Total price: \u20AC " + totalprice;
}

// 页面加载时初始化显示
window.onload = function() {
  calculatePrice();
};

这样修改后，你的只读文本框就能正常显示计算后的总价了。

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