Creating custom calculations using JavaScript (jQuery)

Question

I wish to take the value of an HTML string contained within <bdi> tags - perform a calculation on it - and output the results in a separate <bdi> string, dependent on which input is selected on-page.

The source <bdi> value changes dynamically based on user interaction, but I want to know if what I'm asking is feasible and a rough guide on how to achieve it?

Screenshot to illustrate the user elements:

In the DOM, the source value is nested in the below tag:

<li class="grand_total">
  <span class="name">Grand Total</span> 
  <span class="price">
     <span class="woocommerce-Price-amount amount">
        <bdi>
          <span class="woocommerce-Price-currencySymbol">£</span>
          301.00
         </bdi>
     </span>
   </span>
</li>

If the deposit input option is selected, how can I target this value (or string - sorry if incorrect terminology) using jQuery to divide it by 100 and multiply by 20 - and then output the resultant figure in the target which is nested as follows:

<li class="deposit_free_total">
   <span class="name">Due Today</span>
   <span class="price">
       <span class="woocommerce-Price-amount amount">
            <bdi>
               <span class="woocommerce-Price-currencySymbol">£</span>301.00
            </bdi>
       </span>
   </span>
</li>

The input which needs to be selected to initiate the above has an id of #wc-option-pay-deposit. I'm not sure where to start, so any help is appreciated!

PROGRESS UPDATE:

I've devised the following code, which works as expected:

<script>
jQuery(document).ready(function(changeToPay){
    if (jQuery('#wc-option-pay-deposit').is(':checked')) {
            (jQuery("h1").html("Test"));
    } 
})
jQuery(document).ready(function(){ 
    changeToPay();
});
</script>

Seems like the next step would be to create variables, so that data can be acquired and calculations can be performed, but I've no idea how to join up the dots...

Answer 1

Given you only want to change what is displayed on the client-side...

Try this... And if it works as expected, I will edit with explanations.

jQuery(document).ready(function(changeToPay){

  setInterval(function(){
    if (jQuery('#wc-option-pay-deposit').is(':checked') && !jQuery(".deposit_free_total bdi").is(".calculated")) {
      jQuery(".deposit_free_total bdi").html(jQuery(".grand_total .woocommerce-Price-currencySymbol")[0].outerHTML + (parseFloat(jQuery(".grand_total bdi").text().replace("£","").trim())*0.2).toFixed(2)).addClass("calculated")
    } 
  },50)
  
})

---

EDIT for GB number formatting over a thousand:

You have to remove the thousand separator coma... Easy using .replace().
But you have to re-add it if the 20% result still is over a thousand! You need .toLocaleString() with specific options! I admit that would not have been easy to find.

So the statement inside the if condition now is:

jQuery(".deposit_free_total bdi").html(jQuery(".grand_total .woocommerce-Price-currencySymbol")[0].outerHTML + (parseFloat(jQuery(".grand_total bdi").text().replace("£","").replace(",","").trim())*0.2).toLocaleString('en-GB',{minimumFractionDigits:2, maximumFractionDigits:2})).addClass("calculated")