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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x