如何实现单选按钮表单的Money Straps金额计算功能？

你的思路方向完全没问题，但有几个小细节需要调整，我一步步给你捋清楚：

首先要解决的核心问题：获取单选按钮值的方式不对 #

你原来的代码里用document.getElementById('denom').value，但你的单选按钮并没有id="denom"，而是用name="denom"来分组的，所以这种方式拿不到选中的单选值。要获取同一组单选按钮的选中项，得用document.querySelector('input[name="denom"]:checked')定位到选中的按钮，再取它的value。

其次：结果展示的元素需要调整 #

你原本想把结果放到按钮的innerHTML里，这体验不太好，最好新增一个专门用来展示计算结果的元素，比如<div id="result"></div>。

修正后的完整代码示例 #

调整后的HTML #

<html>
<head>
  <h1 id='header'><b>BUY MONEY</b></h1>
</head>
<body id='body'>
  <form id='strapDenom'>
    <p id='p1'><b>DENOMINATION</b></p>
    <input type='radio' name='denom' value='100' checked> 1's<br>
    <input type='radio' name='denom' value='200'> 2's<br>
    <input type='radio' name='denom' value='500'> 5's<br>
    <input type='radio' name='denom' value='1000'> 10's<br>
    <input type='radio' name='denom' value='2000'> 20's<br>
    <input type='radio' name='denom' value='5000'> 50's<br> <!-- 这里帮你修正了value，按常规1个strap是100张，50元的话应该是50*100=5000 -->
    <input type='radio' name='denom' value='10000'> 100's<br> <!-- 同理100元的strap是100*100=10000 -->
  </form>
  <form id='strapCount'>
    <p id='p2'><b>STRAP COUNT</b></p>
    <input type='radio' name='strap' value='1' checked> 1<br>
    <input type='radio' name='strap' value='2'> 2<br>
    <input type='radio' name='strap' value='3'> 3<br>
    <input type='radio' name='strap' value='4'> 4<br>
    <input type='radio' name='strap' value='5'> 5<br>
    <input type='radio' name='strap' value='6'> 6<br>
    <input type='radio' name='strap' value='7'> 7<br>
    <input type='radio' name='strap' value='8'> 8<br>
    <input type='radio' name='strap' value='9'> 9<br>
    <input type='radio' name='strap' value='10'> 10<br>
  </form>
  <form id='multiply'>
    <p id='p3'><b>MULTIPLE</b></p>
    <input type='radio' name='times' value='1' checked> 1<br>
    <input type='radio' name='times' value='2'> 2<br>
    <input type='radio' name='times' value='3'> 3<br>
    <input type='radio' name='times' value='4'> 4<br>
    <input type='radio' name='times' value='5'> 5<br>
    <input type='radio' name='times' value='6'> 6<br>
    <input type='radio' name='times' value='7'> 7<br>
    <input type='radio' name='times' value='8'> 8<br>
    <input type='radio' name='times' value='9'> 9<br>
    <input type='radio' name='times' value='10'> 10<br>
  </form>
  <br>
  <button id='buy' onclick="buyMoney()">BUY</button>
  <!-- 新增结果展示区域 -->
  <div id="result" style="margin-top:10px; font-weight:bold;"></div>
</body>
</html>

修正后的JavaScript #

function buyMoney() {
  // 获取选中的 denom 值，转成数字
  const denRadio = document.querySelector('input[name="denom"]:checked');
  const den = denRadio ? parseInt(denRadio.value) : 0;
  
  // 获取选中的 strap 值，转成数字
  const strRadio = document.querySelector('input[name="strap"]:checked');
  const str = strRadio ? parseInt(strRadio.value) : 0;
  
  // 获取选中的 times 值，转成数字
  const timRadio = document.querySelector('input[name="times"]:checked');
  const tim = timRadio ? parseInt(timRadio.value) : 0;
  
  // 计算结果并展示，用toLocaleString让数字显示更友好
  const total = den * str * tim;
  document.getElementById('result').innerHTML = `总金额: $${total.toLocaleString()}`;
}

额外小提示 #

• 用parseInt()把获取到的字符串类型的value转成数字，避免出现字符串拼接的错误（比如"100"*"2"会变成200，但如果不小心写成字符串相加就会出问题）。
• 加了toLocaleString()让大数字自动带上千分位分隔符，看起来更直观。

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