Woocommerce – How can I transfer variation data to a function for a live display of the price calculation formula on the single product page?

I’ve already spent a few days on this, but I’m still pretty new to javascript, so I’ve been struggling with getting this to work.
For a client, I need to display the entire price calculation formula live on the single product page when the user selects a different variation of the product from the dropdown and/or when a different product length is entered (number field). In order to get the variation price, I’ve been using this:

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
    var preis_variation = variation.display_regular_price;
    var gewicht_variation = variation.weight;
} );

My issue is that I’m unable to access these two variables in the function that follows. I also tried setting global variables at the beginning, but these are not updated with the above code.

This is the full code:

<script>
jQuery( function( $ ) {

    var preis_variation = 0;
    var gewicht_variation = 0;
    
    window.onload = function () {
                // initiate function grundkosten on dropdown change
        document.getElementById("pa_durchmesser").addEventListener('change', grundkosten);
                // initiate function grundkosten on number field change
        document.getElementById("wck_laenge").addEventListener('change', grundkosten);

               // get variation price and weight
        $( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
            var preis_variation = variation.display_regular_price;
            var gewicht_variation = variation.weight;
        } );
        
                // get additional information and display the calculation within a given html structure
        function grundkosten() {
            var uebertrag_laenge = document.getElementById("wck_laenge").value;
            document.getElementById("facon").innerHTML = preis_variation;
            document.getElementById("kosten_laenge").innerHTML = uebertrag_laenge;
            document.getElementById("total_grundkosten").innerHTML = uebertrag_laenge * 0.50;
            
            var uebertrag_goldpreis = document.getElementById("gold_preis_hidden").value;
            document.getElementById("goldpreis_laenge").innerHTML = uebertrag_laenge;
            document.getElementById("gewicht").innerHTML = gewicht_variation;
            document.getElementById("goldpreis_aktuell").innerHTML = uebertrag_goldpreis;
            document.getElementById("total_goldpreis").innerHTML = uebertrag_laenge * uebertrag_goldpreis;  
        }
    }
} );
</script>

I tried moving this block

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
    var preis_variation = variation.display_regular_price;
    var gewicht_variation = variation.weight;
} );

into the function grundkosten hoping to get access to the variables, but no change. The function grundkosten still does not allow access to preis_variation and gewicht_variation.

I would greatly appreciate some help in how I can transfer the variables to the function grundkosten. Thanks a lot in advance!