计算瓦时时返回0或NaN的技术问题求助（附代码）

我一眼就看出问题所在啦——你现在的代码是在页面刚加载时就把输入框和下拉框的初始值存进变量里了，但用户是之后才输入内容、选择选项的，点击按钮时用的还是页面加载时的空值/默认值，这肯定算不对结果！另外还有几个小细节也拖了后腿，我给你一一修复：

修复后的完整代码 #

<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">
  <thead class="bg-primary">
    <tr>
      <th colspan="2">Load Type</th>
      <th>Quantity</th>
      <th>Wattage (W)</th>
      <th>Duration Use</th>
      <th>Watt Hour</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody class="bg-success">
    <tr>
      <td colspan="2">
        <select class="form-control" id="type">
          <option>Fan</option>
          <option>Iron</option>
          <option>Blub</option>
          <option>Motor</option>
          <option>AC</option>
        </select>
      </td>
      <td><input type="number" size="10px" class="form-control" id="quantity" /></td>
      <td>
        <select class="form-control" id="wattage">
          <option>25</option>
          <option>30</option>
          <option>45</option>
          <option>80</option>
          <option>100</option>
          <option>120</option>
          <option>1000</option>
          <option>1500</option>
          <option>2000</option>
          <option>2500</option>
        </select>
      </td>
      <td><input type="number" size="10px" class="form-control" id="duration_use" /></td>
      <td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
      <td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
    </tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#total").click(function() {
    // 点击按钮时才获取当前的输入值，确保拿到最新数据
    var quantityval = parseInt($("#quantity").val(), 10) || 0; // 加||0处理空值/非数字情况
    var wattsval = parseInt($("#wattage option:selected").val(), 10) || 0;
    var duration = parseInt($("#duration_use").val(), 10) || 0;
    
    var totalval = quantityval * wattsval * duration;
    $("#watt_hour").val(totalval); // 修正ID匹配问题
    console.log(totalval); // 直接打印计算结果更清晰
  }); 
});
</script>

关键修复点说明 #

• 变量获取时机调整：把获取输入值的代码移到click事件内部，这样每次点击按钮时都会读取用户当前输入的最新值，而不是页面加载时的空值。
• 表单元素取值方法修正：把.text()改成.val()——input、select、textarea这类表单元素必须用.val()来读取/设置值，.text()是用来操作普通文本节点的。
• 类型转换与容错处理：给所有parseInt加了|| 0，如果用户输入非数字内容，会自动转为0，避免出现NaN结果；同时给下拉框的wattage值也做了数字转换（下拉框默认返回字符串）。
• ID匹配修复：代码里把$("#watt-hour")改成了$("#watt_hour")，和HTML里textarea的id保持一致，这样才能正确把计算结果赋值到文本框里。
• 优化输入类型：把quantity和duration_use的input类型改成type="number"，这样浏览器会自动限制用户输入数字，减少非数字输入的问题。

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