使用JQuery计算#totalFish、#totalDiesel无结果问题求助

你的代码无法得到正确运算结果，主要有以下几个核心问题：

• 非数字文本直接参与运算：#totalFish和#totalDiesel的内容是Rs.，不是纯数字，直接拿来做算术运算会得到NaN（非数字值）。
• 引用不存在的元素：代码里的#exp元素在HTML中根本没定义，获取到的是空值，参与运算自然出错。
• 未转换数据类型：就算拿到数字格式的字符串，直接用+号会执行字符串拼接，而非算术加法。
• HTML标签未闭合：#totalFish的<div>标签没有闭合，可能导致DOM解析异常，影响元素内容获取。

修改后的代码示例 #

JavaScript 部分

$(document).ready(function() {
  $('#txtdiesel,#txtfish').keyup(function() {
    // 将输入框值转为数字，空值或非数字默认取0
    const fishInput = parseFloat($('#txtfish').val()) || 0;
    const dieselInput = parseFloat($('#txtdiesel').val()) || 0;
    
    // 模拟业务计算（替换成你实际的单价/规则即可）
    const totalFish = fishInput * 12; // 鱼重量 × 单价12
    const totalDiesel = dieselInput * 6; // 柴油量 × 单价6
    const exp = 15; // 假设exp是固定开销或从其他有效元素获取
    
    // 执行算术运算
    const cal = exp + totalDiesel;
    const total = totalFish - cal;
    
    // 更新页面显示，保留Rs.前缀
    $('#totalFish').text(`Rs. ${totalFish}`);
    $('#totalDiesel').text(`Rs. ${totalDiesel}`);
    $('#ramount').text(`Rs. ${total.toFixed(2)}`); // 保留两位小数更规范
  });
});

HTML 部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td style="font-size:14px" id="display"></td>
    <td>
      <div style="font-size:medium;" id="totalFish" class="totalFish">Rs. 0</div>
    </td>
    <td>
      <div style="font-size:medium;" id="totalDiesel" class="totalDiesel">Rs. 0</div>
    </td>
    <td>
      <div style="font-size:medium;" id="ramount" class="ramount">Rs. 0</div>
    </td>
    <td><input id="txtfish" placeholder="输入鱼重量" type="number" name="txtfish" /></td>
    <td><input id="txtdiesel" placeholder="输入柴油量" type="number" name="txtdiesel" /></td>
  </tr>
</table>

关键修改说明 #

1. 数字转换处理：用parseFloat()将输入值转为数字，搭配|| 0避免空值或非法输入导致的运算异常。
2. 修复DOM结构：补全未闭合的<div>标签，将元素放在合法的<table><tr>结构中，确保DOM解析正常。
3. 明确运算逻辑：将输入值和实际业务规则关联（比如乘以单价），替换原来无效的静态文本获取。
4. 规范显示格式：运算结果保留两位小数，同时保留Rs.前缀，兼顾业务需求和数值正确性。

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