使用Javascript根据下拉选项计算数值无输出问题求助

你的代码里有几个关键问题导致选择下拉选项时无数值输出，逐一解决如下：

1. 事件绑定错误 #

HTML中select的onchange属性值必须是函数调用calcVals()，而非仅写函数名calcVals——只写函数名不会触发函数执行，必须加上括号：

<select id="old-english" name="oldenglish" onchange="calcVals()">

2. 元素ID格式错误 #

HTML里的id="old english"不符合规范，ID属性不能包含空格。将ID改为无空格格式（比如old-english），同时同步修改JS里的getElementById参数：

var e = document.getElementById("old-english");

3. HTML结构错误 #

代码里在<input type="number">后多了一个多余的</select>标签，会破坏DOM结构导致浏览器解析异常，直接删除该标签即可。

4. 数值一致性优化（可选） #

你需求里的单价是13.95，但HTML里标注的是13,25€ per kilo，建议统一数值避免混淆。

修正后的完整代码 #

JavaScript部分 #

function calcVals() {
  var e = document.getElementById("old-english");
  var selFrst = e.options[e.selectedIndex].value;
  var totalCal = +selFrst * 13.95;
  // 保留两位小数优化显示效果
  document.getElementById("totalAmount").value = totalCal.toFixed(2);
}

HTML部分 #

<div>
  Red Leicester Cheese
  <br> 13.95€ per kilo
  <select id="old-english" name="oldenglish" onchange="calcVals()">
    <option value="0" disabled selected></option>
    <option value="1">1 Kilo</option>
    <option value="2">2 Kilos</option>
    <option value="3">3 Kilos</option>
    <option value="4">4 Kilos</option>
    <option value="5">5 Kilos</option>
  </select>
  <br><label for="weight">Enter Weight</label>
  <br>
  <input type="number">

  Textbox :
  <input name="totalAmount" id="totalAmount" type="text" readonly>
</div>

现在选择下拉选项后，就能正常计算并显示结果，比如选「3 Kilos」时会输出41.85。

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