Can't remove class with Javascript

InMotion_Design
New Member
4 0 0

I'm trying to remove a class attribute from my code using Javascript but I get an error saying "TypeError: Cannot read property 'remove' of undefined"

const dropDowns = document.querySelectorAll(".mobile-nav .dropdown");
for (var i = 0; i < dropDowns.length; i++) {
  dropDowns[i].addEventListener("click", function () {
    this.children[1].classList.add("active");
  });
}

function closeDropDown() {
  const temp = document.querySelectorAll(".mobile-nav .dropdown-content");
  temp.classList.remove("active");
}

 

<div class="dropdown">
          <button class="dropbtn">{{ link.title }}
            <i class="fa fa-caret-down"></i>
          </button>
          <div class="dropdown-content">
            <div class="mm-row">
              <div class="mm-column">
                <div class="mm-subcategory">
                  <i class="fas fa-arrow-left" onclick="closeDropDown()"></i>
                  <h3>{{ link.title | link_to: link.url }}</h3>
                </div>
                {% for child_link in linklists[child_list_handle].links %}
                {{ child_link.title | link_to: child_link.url }}
                {% endfor %}
              </div>
              <div class="dropdown-feature">
                {% assign collection= collections.winter-wear %}
                <img src="{{ collection.image | img_url: '908x330' }}" >
              </div>
            </div>
          </div><!-- /dropdown-content -->
        </div>

 

0 Likes
Jayvin
Shopify Partner
164 24 34

Hi,

You are getting this error because temp is not defined, '.mobile-nav .dropdown-content' html elements have not been found.

You need to check if this element exists before remove the class. An example is to do something like this in your code.

function closeDropDown() {
  const temp = document.querySelectorAll(".mobile-nav .dropdown-content");
  typeof(temp) !== "undefined" && temp.classList.remove("active");
}
0 Likes