通过单选按钮和JS将条纹费添加到总成本中

Question

我有3个单选按钮，分别具有3个不同的数量。希望给用户选择赠予Stripe交易费的机会。

当我检查每个单选按钮时，费用正在更新，但是我似乎无法正确计算费用。当用户手动输入金额（如下面的我的CodePen链接中所示）时，它可以工作。

在DevTools控制台中看到的错误是：

  

getMessage的第一个参数应为“ string”，为   未定义（类型为“未定义”）

我在考虑是否可以使Pgoal等于应该执行的var $checked的值...也许...

试图使它像这样工作，但是使用单选按钮：CodePen Link

这是我当前的代码，以及CodePen Link和代码段。

    //JS
    var $radios = $('input[name="radio"]');
    $radios.change(function() {
      var $checked = $radios.filter(':checked');
      document.getElementById("amount").innerHTML = $checked.val();
      // console.log($checked.val());
    });
    
    var Pgoal = document.querySelector('#amount');
    var Ffixed = document.querySelector('#f-fixed');
    var Fpercent = document.querySelector('#f-percent');
    var Pcharge = document.querySelector('#p-charge');
    var checkbox = document.querySelector('#gift-check');
    var totalBox = document.querySelector('.total-box');
    
    var totalDonation = $('.total-box > span');
    
    function f(n) {
      return Number((+n).toFixed(10));
    }
    
    function calcPcharge(goal, fixed, percent) {
      return (goal + fixed) / (1 - percent) - (goal);
    }
    
    function update() {
      console.log('update')
      var charge = calcPcharge(
        f(Pgoal.value),
        f(Ffixed.value),
        f(Fpercent.value / 100)
      );
    
      Pcharge.value = (charge || 0).toFixed(2);
    
    
      totalDonation.text((checkbox.checked ? f(Pgoal.value) + f(charge) : f(Pgoal.value)).toFixed(2));
    }
    
    [].forEach.call(document.querySelectorAll('input'), function() {
      this.addEventListener('input', update);
      this.addEventListener('update', update);
    });
    
    update();
    
    checkbox.addEventListener('change', update);

    /* CSS */
    input[type="number"]:disabled {
      background-color: transparent;
      border-style: none;
      text-decoration: underline;
      color: tomato
    }

<!-- HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <input type="radio" name="radio" value="40" />
    <label>$40 Monthly</label>
    
    <input type="radio" name="radio" value="120" checked/>
    <label>$120 Quarterly</label>
    
    <input type="radio" name="radio" value="480" />
    <label>$480 Annually</label>
    
    <h4>Cost $<span id="amount">120</span></h4>
    
    <input type="hidden" id="f-fixed" type="number" value="0.30">
    <input type="hidden" id="f-percent" type="number" value="2.9">
    
    
    <p>Gift fee $<input size='5' id="p-charge" type="number" disabled></p>
      
      <input type="checkbox" value="yes" name="yes" id="gift-check" /> Check box for yes
    
    
    <h3 class="total-box">
      Your total cost is $<span></span>
    </h3>

Answer 1

主要问题是Pgoal正在使用value跨度中的（不存在）#amount。这应该是innerText。在更新#amount跨度与运行更新之间还存在时间问题，因此我将Pgoal.value更改为$('input[name="radio"]:checked').val()：

    //JS
    var $radios = $('input[name="radio"]');
    $radios.change(function() {
      var $checked = $radios.filter(':checked');
      document.getElementById("amount").innerHTML = $checked.val();
      // console.log($checked.val());
    });
    
    var Pgoal = document.querySelector('#amount');
    var Ffixed = document.querySelector('#f-fixed');
    var Fpercent = document.querySelector('#f-percent');
    var Pcharge = document.querySelector('#p-charge');
    var checkbox = document.querySelector('#gift-check');
    var totalBox = document.querySelector('.total-box');
    
    var totalDonation = $('.total-box > span');
    
    function f(n) {
      return Number((+n).toFixed(10));
    }
    
    function calcPcharge(goal, fixed, percent) {
      return (goal + fixed) / (1 - percent) - (goal);
    }
    
    function update() {
      var goal = $('input[name="radio"]:checked').val();
      var charge = calcPcharge(
        f(goal),
        f(Ffixed.value),
        f(Fpercent.value / 100)
      );
    
      Pcharge.value = (charge || 0).toFixed(2);
    
    
      totalDonation.text((checkbox.checked ? f(goal) + f(charge) : f(goal)).toFixed(2));
    }
    
    [].forEach.call(document.querySelectorAll('input'), function() {
      this.addEventListener('input', update);
      this.addEventListener('update', update);
    });
    
    update();
    
    checkbox.addEventListener('change', update);

    /* CSS */
    input[type="number"]:disabled {
      background-color: transparent;
      border-style: none;
      text-decoration: underline;
      color: tomato
    }

<!-- HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <input type="radio" name="radio" value="40" />
    <label>$40 Monthly</label>
    
    <input type="radio" name="radio" value="120" checked/>
    <label>$120 Quarterly</label>
    
    <input type="radio" name="radio" value="480" />
    <label>$480 Annually</label>
    
    <h4>Cost $<span id="amount">120</span></h4>
    
    <input type="hidden" id="f-fixed" type="number" value="0.30">
    <input type="hidden" id="f-percent" type="number" value="2.9">
    
    
    <p>Gift fee $<input size='5' id="p-charge" type="number" disabled></p>
      
      <input type="checkbox" value="yes" name="yes" id="gift-check" /> Check box for yes
    
    
    <h3 class="total-box">
      Your total cost is $<span></span>
    </h3>