How to Convert Jquery Code to JavaScript

How can convert the JQuery code to JavaScript?

A few points:

$(selector) is closer to document.querySelectorAll(selector) than to document.querySelector(selector). So you'll want the former, and to iterate over the returned NodeList.
jQuery .val( value ) will set the .value property when called on an object that points to an HTMLElement that has such property (like your <input>). So that what you want to set, not the .innerHTML which wouldn't have any positive effects on this element.
.text() is also a jQuery method. As a getter it's equivalent to Node.textContent.

document.querySelectorAll(".dropdown-menu-state .dropdown-item")  .forEach( function( elem ) {    elem.addEventListener("click", function() {     document.getElementById("state").value = this.textContent;    });  });

<input type="text" id="state" data-toggle="dropdown" placeholder="State"><div class="dropdown-menu dropdown-menu-state" aria-labelledby="state" role="menu">   <a href="#" class="dropdown-item">value1</a>   <a href="#" class="dropdown-item">value2</a>   <a href="#" class="dropdown-item">value3</a></div>

Convert jQuery dropdown change event handler into pure JavaScript code

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>

How to Convert Jquery Code to JavaScript

How can convert the JQuery code to JavaScript?

Convert jQuery dropdown change event handler into pure JavaScript code

Related Topics

Leave a reply