javascript - 通过单选按钮和 JS 将 Stripe 费用添加到总成本中

Question

我有 3 个单选按钮，它们有 3 个不同的数量。希望让用户可以选择赠送 Stripe 交易费。

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

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

the first argument to getMessage should be type "string", was undefined (type "undefined")

我在想是否可以让 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 使用了 #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>