The code below is supposed to display an hidden text box if option “other” chosen. I don’t want to use jQuery. Could you please help identify the reason why it doesn’t work.
<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 id="find-other" class="cart-attribute__field" 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>
// Event listener that fires when the Window is loaded
window.addEventListener("load", function() {
let howDidYouFindUs = document.getElementById('how-did-you-find-us');
let findOther = document.getElementById("find-other");
// Change event listener
howDidYouFindUs.addEventListener("change", function(){
// Ternary operator to toggle the display
document.getElementById("find-other").style.display = (howDidYouFindUs.value === "Other") ? "block" : "none";
});
}); // Get the elements
</script>