Automatically update the text of an element in each post on the page with the value of a selected choice of a specific facet

<?php
// Automatically updates the text of an element with the class "facet-one-selections" in each post on the page, 
// with the value of the selected choice of a specific facet (with the name 'facet_one' in this example).
// The code assumes the facet is a single-choice type facet (e.g. Dropdown or Radio).
// Note that the text displayed is the facet_value (the technical value as shown in the URL) is used, not the facet_display_value as shown in the facet
// To make the text value more readable and looking like the value as displayed in the facet, 
// the script replaces dashes in the value with spaces. If needed use the optional CSS to add capitals, as described.

// The posts in the listing need to have the element, with the following classes:
// <span class="facet-selections facet-one-selections"></span>
// The whole construct can be multiplied tow work with multiple facetx.

// Note: to do the same with multiple facets, for an element that is not in the post listing but somewhere else on the page, see:
// https://gist.facetwp.com/gist/automatically-update-the-text-of-an-element-on-the-page-with-the-value-of-a-selected-choice-of-a-specific-facet/

// Note: to display an “x results found for [keywords]” message when a Search facet is in use, see this similar setup:
// https://facetwp.com/help-center/facets/facet-types/search/#display-an-x-results-found-for-keywords-message

add_action( 'facetwp_scripts', function() {
    ?>
    <script>
        document.addEventListener('facetwp-loaded', function() {

            // Add the selected choice of facet one to the HTML item with class "facet-one-selections"
            var selected_choices = FWP.facets['facet_one']; // Replace "facet_one" with the name of your facet
            var updatedElements_choices = document.querySelectorAll('.facet-one-selections');

            // Update the text content of the element with class "facet-one-selections"
            // Check if we have any matching elements
            if (updatedElements_choices.length > 0) {
                
                // Prepare the text content
                var displayed_choice = '';
                if (selected_choices.length) { // If any choice in this facet is selected
                    displayed_choice = selected_choices[0].replace(/-/g, ' '); // Replace dashes with spaces
                }

                // Update all matching elements
                updatedElements_choices.forEach(function(element) {
                    element.textContent = displayed_choice;
                });
            }

        });
    </script>
    <?php
}, 100 );

// Optional: use one of the CSS capitalization rules (and delete the others):
add_action( 'wp_head', function() {
    ?>
    <style>

        /* Capitalize first letters of all words */
        .facet-one-selections {
            text-transform: capitalize;
        }

        /* Capitalize only the first letter of the first word */
        .facet-one-selections::first-letter {
            text-transform: uppercase;
        }

        /* Capitalize all letters */
        .facet-one-selections {
            text-transform: uppercase;
        }

    </style>
    <?php
}, 100 );