woocommerce - 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>

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)
  
})