Значение текстового поля не умножается при установленном флажке (HTML & Javascript / JQuery)

Question

Мой код обновляет текстовое поле CP C, когда выбраны параметры, но когда установлена ​​скидка агентства (т. Е. Флажок 10%), он успешно понижает значение текстового поля CP C на 10%, но не выполняет то же самое для текстового поля «Общая стоимость».

Значение текстового поля «Общая стоимость» должно быть (текстовое поле «CP C значение * количество кликов») * множитель процента дисконта

Может кто-нибудь увидеть, где я пошло не так? Я буду рад уточнить, если я не объяснил это очень хорошо!

HTML:

<div class="runningtotal">
  Running CPC Total (in £): <input id="sum" type="text" readonly="true" value="0.00" data-total="0" />
  Total Cost (in £): <input id="totalcost" type="text" readonly="true" value="0 (until clicks specified)" data-total="0" />
</div>

<div class="black_whitelisting">
    <h1>4. Blacklist/Whitelist?</h1>
    <input type="checkbox" class="blacklist" name="blacklist" value="0.20" id="blacklist_checkbox" onclick="BlacklistFunction()">Blacklist required<br>
    <input type="checkbox" class="whitelist" name="whitelist" value="0.30" id="whitelist_checkbox">Whitelist required<br>
</div>

<div class="selecttier">
    <h1>5. Number of Clicks</h1>
    <input id="numberofclickstextbox" type="text" value="0.00" data-total="0" oninput="calculatetier()" />
</div>

<div class="agencydiscount">
  <h1>6. Agency Discount</h1>
  <label>
    <input type="radio" name="percentdiscount" value="1" checked>
    None
  </label>
  <label>
    <input type="radio" name="percentdiscount" id="10percent" value="0.9" onclick="calculatetotalcost10()" >
    10% Discount
  </label>
  <label>
    <input type="radio" name="percentdiscount" id="15percent" value="0.85" onclick="calculatetier15()" >
    15% Discount
  </label>
</div>

Javascript:

jQuery(function($) {
  $('input[name="percentdiscount"]').on('change', function() {
    applyDiscount();
  });

  $('input[type=checkbox]').click(function() {
    let sum = 0;        
    $('input[type=checkbox]:checked').each(function() {
      sum += parseFloat($(this).val());
    });
    $('#sum').val(sum.toFixed(2)).data('total', sum);
    applyDiscount();
  });

  function applyDiscount() {
    var pc = parseFloat($('input[name="percentdiscount"]:checked').val());
    $('#sum').val(function() {
      return ($(this).data('total') * pc).toFixed(2);
    });
  }
});

//to work out total cost    
function calculatetier() {
        var myBox5 = document.getElementById('numberofclickstextbox').value;    
        var myBox6 = document.getElementById('sum').value;
        var result = document.getElementById('totalcost');  
        var myResult = myBox5 * myBox6;
        result.value = myResult.toFixed(2);
    }

Answer 1

Похоже, вы рассчитываете, что функция не вызывается при изменении скидки.

Рабочая демоверсия: https://codepen.io/punith/pen/gOpaVxr?editors=1010

HTML код

<div class="runningtotal">
  Running CPC Total (in £): <input id="sum" type="text" readonly="true" value="0.00" data-total="0" />
  Total Cost (in £): <input id="totalcost" type="text" readonly="true" value="0 (until clicks specified)" data-total="0" />
</div>

<div class="black_whitelisting">
    <h1>4. Blacklist/Whitelist?</h1>
    <input type="checkbox" class="blacklist" name="blacklist" value="0.20" id="blacklist_checkbox" >Blacklist required<br>
    <input type="checkbox" class="whitelist" name="whitelist" value="0.30" id="whitelist_checkbox">Whitelist required<br>
</div>


<div class="selecttier">
    <h1>5. Number of Clicks</h1>
    <input id="numberofclickstextbox" type="text" value="0.00" data-total="0" oninput="calculatetier()" />
</div>

<div class="agencydiscount">
  <h1>6. Agency Discount</h1>
  <label>
    <input type="radio" name="percentdiscount" value="1" checked>
    None
  </label>
  <label>
    <input type="radio" name="percentdiscount" id="10percent" value="0.9"  >
    10% Discount
  </label>
  <label>
    <input type="radio" name="percentdiscount" id="15percent" value="0.85"  >
    15% Discount
  </label>
</div>

JS код

function calculatetier() {
        var myBox5 = document.getElementById('numberofclickstextbox').value;    
        var myBox6 = document.getElementById('sum').value;
        var result = document.getElementById('totalcost');      
  if(myBox6=="0.00"){
          myBox6 =1;
        }
console.log(myBox6)
        var myResult = myBox5 * myBox6;
        result.value = myResult.toFixed(2);
    }
jQuery(function($) {
  $('input[name="percentdiscount"]').on('change', function() {
    applyDiscount();
  });

  $('input[type=checkbox]').click(function() {
    let sum = 0;        
    $('input[type=checkbox]:checked').each(function() {
      sum += parseFloat($(this).val());
    });
    $('#sum').val(sum.toFixed(2)).data('total', sum);
    applyDiscount();
  });
//to work out total cost    

  function applyDiscount() {
    var pc = parseFloat($('input[name="percentdiscount"]:checked').val());
    $('#sum').val(function() {
      return ($(this).data('total') * pc).toFixed(2);
    });
    calculatetier()
  }
});

Answer 2

вместо этого попробуйте использовать событие onchange. Я предполагаю, что событие, которое вы связываете, неверно

<input id="numberofclickstextbox" type="text" value="0.00" data-total="0" onchange="calculatetier()" />