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

   <p >
      <label>How did you hear about us?</label><br>
      <select 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  style="display: none;">
      <label for="how-did-you-find-us-other">Other: </label>
      <input 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>

CodePudding user response：

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 >
  <label>How did you hear about us?</label><br>
  <select 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  style="display: none;">
  <label for="how-did-you-find-us-other">Other: </label>
  <input 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>