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>
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>