如何实现带默认值的下拉选择总价计算？点击Sum按钮无响应

问题根源 #

• HTML结构错误：原代码中<td>标签嵌套了另一个<td>，破坏表格结构导致元素选择异常
• 核心函数缺失：未定义myFunction()（下拉同步价格）和processItem1()（计算总价），点击按钮自然无反应
• 元素标识缺失：数量、总价输入框未设置id，无法精准获取输入值

修正后的完整代码 #

HTML部分（修复结构+补充标识）

<tr>
  <th>
    <select id="selection" onchange="myFunction()">
      <option id="0" value="0">None</option>
      <option id="1" value="4.00">Women Suit</option>
      <option id="2" value="10.00">Dress</option>
      <option id="3" value="6.00">Regular Skirt</option>
      <option id="4" value="7.00">Skirt With Hook</option>
      <option id="5" value="8.00">Men's Suit 2Pc</option>
      <option id="6" value="9.00">Men's Suit 3Pc</option>
      <option id="7" value="15.00">Sweaters</option>
      <option id="8" value="25.00">Silk Shirt</option>
      <option id="9" value="12.00">Tie</option>
      <option id="10" value="13.00">Coat</option>
      <option id="11" value="14.00">Jacket</option>
      <option id="12" value="15.00">Swede</option>
    </select>
  </th>

  <td>
    <div>
      <input type="text" name="price" id="priceitem1" readonly>
    </div>
  </td>
  <td>
    <div class="qty"> Quantity :<input type="text" name="qtyItem1" id="qtyItem1" value="1"></div>
  </td>
  <td>
    <div><input type="button" value="Sum" onclick="processItem1()"></div>
  </td>
  <td>
    <div><input type="text" name="sumItem1" id="sumItem1" readonly></div>
  </td>
  <td>
    <i class="fa fa-trash-o"></i>
  </td>
</tr>

JavaScript部分（补充核心逻辑）

将以下代码放在HTML的<body>标签末尾：

// 下拉选择时同步商品价格到输入框
function myFunction() {
  const select = document.getElementById('selection');
  const priceInput = document.getElementById('priceitem1');
  priceInput.value = select.value;
}

// 计算商品总价
function processItem1() {
  const price = parseFloat(document.getElementById('priceitem1').value);
  const quantity = parseInt(document.getElementById('qtyItem1').value);
  
  // 校验输入有效性
  if (isNaN(price) || isNaN(quantity) || quantity < 1) {
    alert('请输入有效的正整数数量');
    return;
  }
  
  // 计算并保留两位小数显示总价
  const total = price * quantity;
  document.getElementById('sumItem1').value = total.toFixed(2);
}

// 页面加载时自动初始化默认价格
window.onload = () => {
  myFunction();
};

使用说明 #

1. 下拉选择商品后，价格输入框会自动填充对应金额（设置为只读避免手动修改）
2. 数量输入框默认值为1，可自行修改为正整数
3. 点击「Sum」按钮即可计算并显示总价
4. 若输入无效内容（非数字、数量小于1），会弹出提示

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