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

<?php
// Automatically updates the text in a specific element with the class "facet-one-selections", 
// 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 example includes an optional part for a second facet (with the name 'facet_two'), which selection will be displayed in the element with class "facet-two-selections".
// If facet-one has selections, the text in facet-two-selections will be prepended with 'and'. This assumes a setup in which the 2 HTML elements are next to each other, e.g.:
// <span class="facet-one-selections"></span><span class="facet-two-selections"></span>

// 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-refresh', 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 updatedElement_choices = document.querySelector('.facet-one-selections');

        // Update the text content of the element with class "facet-one-selections"
        if (updatedElement_choices) {
          if (selected_choices.length) { // If any choice in this facet is selected
            var selected_choices_withoutdashes = selected_choices[0].replace(/-/g, ' '); // Replace dashes with spaces
            updatedElement_choices.textContent = selected_choices_withoutdashes;
          } else {
            updatedElement_choices.textContent = '';
          }
        }

        // Optional: use a 2nd facet and add its choice to the HTML item with class "facet-two-selections"
        var selected_choices2 = FWP.facets['facet_two']; // Replace "facet_two" with the name of your 2nd facet
        var updatedElement_choices2 = document.querySelector('.facet-two-selections');

        // Update the text content of the element with class "facet-two-selections"
        if (updatedElement_choices2) {
          if (selected_choices2.length) { // If any choice in this facet is selected
            var selected_choices2_withoutdashes = selected_choices2[0].replace(/-/g, ' '); // Replace dashes with spaces, because the facet_value (the technical value as shown in the URL) is used

            updatedElement_choices2.textContent = '';

            // optional prepend ' and ' if facet one does not have a selection
            if ( updatedElement_choices.textContent !== '' ) {
              updatedElement_choices2.textContent = ' and ';
            }

            updatedElement_choices2.textContent += selected_choices2_withoutdashes;
          } else {
            updatedElement_choices2.textContent = '';
          }
        }
        // end optional 2nd facet

      });
    </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-selections {
       text-transform: capitalize;
     }
        
     /* Capitalize only the first letter of the first word */
     .facet-selections::first-letter {
       text-transform: uppercase;
     }
        
     /* Capitalize all letters */
      .facet-selections {
        text-transform: uppercase;
      }
        
    </style>
    <?php
}, 100 );