Convert jQuery dropdown change event handler into pure JavaScript code

To achieve better performance for our Shopify store, we disabled jQuery. Could you please help change jQuery code below to its JavaScript equivalent?

   <p class="cart-attribute__field">
      <label>How did you hear about us?</label><br>
      <select required class="required" id="how-did-you-find-us" name="attributes[How did you hear about us?]">
        <option value="Search (Google)"{% if cart.attributes["How Did You Find Us?"] == "Search (Google)" %} selected{% endif %}>Search (Google)</option>
        <option value="Event"{% if cart.attributes["How Did You Find Us?"] == "Event" %} selected{% endif %}>Event</option>
        <option value="Friend / Co-worker"{% if cart.attributes["How Did You Find Us?"] == "Friend / Co-worker" %} selected{% endif %}>Friend / Co-worker</option>
        <option value="Current Customer"{% if cart.attributes["How Did You Find Us?"] == "Current Customer" %} selected{% endif %}>Current Customer</option>
        <option value="Social Media"{% if cart.attributes["How Did You Find Us?"] == "Social Media" %} selected{% endif %}>Social Media</option>
        <option value="Ad"{% if cart.attributes["How Did You Find Us?"] == "Ad" %} selected{% endif %}>Ad</option>
        <option value="News"{% if cart.attributes["How Did You Find Us?"] == "News" %} selected{% endif %}>News</option>
        <option value="Other"{% if cart.attributes["How Did You Find Us?"] == "Other" %} selected{% endif %}>Other</option>
      </select>
    </p>
    <p class="cart-attribute__field find-other" style="display: none;">
      <label for="how-did-you-find-us-other">Other: </label>
      <input required class="required" id="how-did-you-find-us-other" type="text" name="attributes[How did you hear about us? - Other]" value="{{ cart.attributes["How Did You Find Us - Other"] }}">
    </p>
    
    <script>
    jQuery(function($) {
      $('#how-did-you-find-us').change(function() {
        if ($('#how-did-you-find-us').val() == 'Other') {
          $('.find-other').show();
        } else {
          $('.find-other').hide();
        }
      });
    });
    </script>

>Solution :

The event listeners are added using addEventListener and instead of show/hide, the display property of the element is used.

Also, read about ternary operator.

// Event listener that fires when the DOM is loaded
document.addEventListener("DOMContentLoaded", function(){
  // Get the elements
  let howDidYouFindUs = document.querySelector("#how-did-you-find-us")
  let findOther = document.querySelector(".find-other")
  
  // Change event listener
  howDidYouFindUs.addEventListener("change", function(){
    // Ternary operator to toggle the display
    findOther.style.display = howDidYouFindUs.value === "Other" ? "block" : "none"
  })
})

Working snippet:

// Event listener that fires when the DOM is loaded
document.addEventListener("DOMContentLoaded", function(){
  // Get the elements
  let howDidYouFindUs = document.querySelector("#how-did-you-find-us")
  let findOther = document.querySelector(".find-other")
  
  // Change event listener
  howDidYouFindUs.addEventListener("change", function(){
    // Ternary operator to toggle the display
    findOther.style.display = howDidYouFindUs.value === "Other" ? "block" : "none"
  })
})

<p class="cart-attribute__field">
  <label>How did you hear about us?</label><br>
  <select required class="required" id="how-did-you-find-us" name="attributes[How did you hear about us?]">
    <option value="Search (Google)">Search (Google)</option>
    <option value="Event">Event</option>
    <option value="Friend / Co-worker">Friend / Co-worker</option>
    <option value="Current Customer">Current Customer</option>
    <option value="Social Media">Social Media</option>
    <option value="Ad">Ad</option>
    <option value="News">News</option>
    <option value="Other">Other</option>
  </select>
</p>
<p class="cart-attribute__field find-other" style="display: none;">
  <label for="how-did-you-find-us-other">Other: </label>
  <input required class="required" id="how-did-you-find-us-other" type="text" name="attributes[How did you hear about us? - Other]" value="{{ cart.attributes[" How Did You Find Us - Other "] }}">
</p>