如何解决投注脚本中的NaN错误并实现购物车为空时Total Odds为0及Payout计算功能

我来帮你一步步修复脚本里的问题，让Total Odds在购物车为空时显示0，同时正确计算派彩金额。

问题根源分析 #

你遇到的NaN错误和计算异常主要来自这几个点：

• 购物车为空时，空数组直接调用reduce相乘会返回NaN（没有初始值兜底）
• 派彩计算脚本有语法错误（多余的4），还误用parseInt处理小数，并且用text()获取输入框的值（应该用val()）
• 计算逻辑嵌套在按钮点击事件里，导致重复绑定，逻辑混乱

修正后的完整代码 #

先把所有代码整合并修复，注释里会说明关键修改：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bet Plus 24/7</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<!-- 修复拼写错误：javscript → javascript -->
<script type="text/javascript" src="script.js"></script>
</head>
<body style ="margin:10px;">
<div class="cart">
<div class="title">Bet Slip</div>
<div id="box" class="boxlit"></div>
<br>
<!-- 初始值设为0，避免页面加载时显示空白 -->
<div>Total Odds: <b id="ct1">0</b></div>
<br>
<div>(N$)Stake: <input id="stake" type="number" value="5"><span> NAD</span></div>
<br>
<div>Payout: <b id="payout">0</b></div>
<button class="bet1">Bet</button>
<div class="footer"></div>
</div>
<br>
<table id="Table1" class="Fixtures-Table">
<thead>
<tr>
<th>League</th>
<th>Home</th>
<th>Draw</th>
<th>Away</th>
<th>Kickoff</th>
</tr>
</thead>
<tbody >
<tr><th>AFF U19 Championship Group Stage<td id="label" >1<td id="label" >x<td id="label" >2</th></tr>
<tr>
<td class="addItem">Myanmar U19 - Vietnam U19</td>
<td><input type="button" class="decimals" id="" value ="9.00" /></td>
<td><input type="button" class="decimals" id="" value ="4.60" /></td>
<td><input type="button" class="decimals" id="" value ="1.29" /></td>
<td class="label">7/8/2022 10:00</td>
</tr><tr>
<td class="addItem">Philippines U19 - Indonesia U19</td>
<td><input type="button" class="decimals" id="" value ="37.00" /></td>
<td><input type="button" class="decimals" id="" value ="8.25" /></td>
<td><input type="button" class="decimals" id="" value ="1.04" /></td>
<td class="label">7/8/2022 15:00</td>
</tr><tr><th>Africa Women Cup of Nations<td id="label" >1<td id="label" >x<td id="label" >2</th></tr>
<tr>
<td class="addItem">Burkina Faso - Uganda</td>
<td><input type="button" class="decimals" id="" value ="2.65" /></td>
<td><input type="button" class="decimals" id="" value ="2.85" /></td>
<td><input type="button" class="decimals" id="" value ="2.55" /></td>
<td class="label">7/8/2022 22:00</td>
</tr><tr>
<td class="addItem">Morocco - Senegal</td>
<td><input type="button" class="decimals" id="" value ="2.20" /></td>
<td><input type="button" class="decimals" id="" value ="2.95" /></td>
<td><input type="button" class="decimals" id="" value ="3.15" /></td>
<td class="label">7/8/2022 22:00</td>
</tr>
</tbody>
</table>

<script>
// 初始化按钮ID
$(".decimals").each(function(index) {
  $(this).attr("id", index);
});

let $th = $('#Table1 thead th');

// 抽离Total Odds计算函数，复用性更强
function calculateTotalOdds() {
  let values = $('.crtTotal').map((i, el) => parseFloat(el.textContent)).get();
  // 空数组时返回0，有值时从1开始相乘（避免NaN）
  let total = values.length > 0 ? values.reduce((a, b) => a * b, 1) : 0;
  $('#ct1').text(total.toFixed(2));
  // 计算完赔率后同步更新派彩
  calculatePayout();
}

// 抽离派彩计算函数
function calculatePayout() {
  // 用parseFloat处理小数，空值默认设为0
  let totalOdds = parseFloat($('#ct1').text()) || 0;
  let stakeAmount = parseFloat($('#stake').val()) || 0;
  let payout = totalOdds * stakeAmount;
  $("#payout").text(payout.toFixed(2));
}

// 赔率按钮点击事件
$(".decimals").on('click', e => {
  let $btn = $(e.target);
  let $option = $(`.box[data-id="${$btn.prop('id')}"]`);
  let $tr = $btn.closest('tr');
  let selectionIndex = $btn.closest('td').index();
  let match = $tr.find('td:first').text().trim();
  let result = $th.eq(selectionIndex).text().trim();
  let value = $btn.val();

  if ($option.length) {
    $option.remove();
  } else {
    $("#box").append(`<div class="box" data-id="${$btn.prop('id')}">${match}<br>${result}<div class="crtTotal">${value}</div></div>`);
  }
  // 每次操作后重新计算赔率
  calculateTotalOdds();
});

// 监听投注金额变化，实时更新派彩
$('#stake').on('input change', calculatePayout);

// Bet按钮点击触发计算（保留实时更新的同时支持手动触发）
$('.bet1').on('click', calculatePayout);

// 页面加载完成后初始化计算
$(document).ready(function() {
  calculateTotalOdds();
});
</script>

关键修改说明 #

1. 解决NaN问题：

   • 给reduce添加初始值1，确保数组有值时从1开始相乘；空数组时直接返回0
   • 页面初始化时给Total Odds和Payout设置默认值0

2. 派彩计算修复：

   • 移除了原代码中多余的4语法错误
   • 用parseFloat替代parseInt，适配小数赔率和投注金额
   • 用$('#stake').val()获取输入框的值（原代码用text()是错误的）
   • 添加空值兜底：如果数值无效，默认用0，避免NaN

3. 逻辑优化：

   • 将计算逻辑抽成独立函数，避免重复绑定事件和代码冗余
   • 每次添加/移除购物车项后自动更新数值
   • 监听投注金额输入框的变化，实时更新派彩，提升用户体验

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