Attempting to apply a class to selected elements, however, the conditional statement is not functioning as intended

Question

Attempting to apply a class to selected elements, however, the conditional statement is not functioning as intended

<div>
<div class=category> Special Occasions </div>
<div class=category> Holidays </div>
<div class=category> Graduations </div>
<div class=category> Retirements </div>
</div>

<ul>
<li class="product-filter-items">Special Occasions</li>
<li class="product-filter-items">Retirements</li>
<li class="product-filter-items">Graduations</li>
<li class="product-filter-items">Holidays</li>
</ul>

<script>
    let proCatList = document.querySelectorAll(".category")
    
    let proFilterItems = document.querySelectorAll(".product-filter-items")        
    
    for(let i = 0; i < proFilterItems.length; i++){
    
        proFilterItems[i].addEventListener("click", function(){        
        
            if (proCatList[i].textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim() == proFilterItems[i].textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim()){
    
                proFilterItems[i].classList.add("active-filter")
                console.log("Class Added")
            }
        })  
    
    }
</script>

I am attempting to apply a class when clicked. My goal is to add the class "active-filter" if the category name matches the product filter item clicked. Can anyone assist in identifying why the textContent of proCatList is not being recognized in this statement?

javascript if-statement

Answer 1

Answer №1

The iterator parameter i cannot be utilized in the event handler. Instead, you can access the index of the clicked element by using this.

To obtain the index, you can employ this concise function:

const getIndex = elem => [...elem.parentNode.children].indexOf(elem);

See the functional demo below:

let proCatList = document.querySelectorAll(".category");
let proFilterItems = document.querySelectorAll(".product-filter-items");

/* Function to get the index */
const getIndex = elem => [...elem.parentNode.children].indexOf(elem);

for (let i = 0; i < proFilterItems.length; i++) {
  proFilterItems[i].addEventListener("click", function() {
    const elem_index = getIndex(this);
    
    if (proCatList[elem_index].textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim() == this.textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim()) {
      this.classList.add("active-filter");
      console.log("Class Added");
    }
  })
}

<div>
  <div class=category> Birthdays </div>
  <div class=category> Anniversaries </div>
  <div class=category> Newborns </div>
  <div class=category> Weddings </div>
</div>

<ul>
  <li class="product-filter-items">Birthdays</li>
  <li class="product-filter-items">Weddings</li>
  <li class="product-filter-items">Newborns</li>
  <li class="product-filter-items">Anniversaries</li>
</ul>

Answer 2

The iterator parameter i cannot be utilized in the event handler. Instead, you can access the index of the clicked element by using this.

To obtain the index, you can employ this concise function:

const getIndex = elem => [...elem.parentNode.children].indexOf(elem);

See the functional demo below:

let proCatList = document.querySelectorAll(".category");
let proFilterItems = document.querySelectorAll(".product-filter-items");

/* Function to get the index */
const getIndex = elem => [...elem.parentNode.children].indexOf(elem);

for (let i = 0; i < proFilterItems.length; i++) {
  proFilterItems[i].addEventListener("click", function() {
    const elem_index = getIndex(this);
    
    if (proCatList[elem_index].textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim() == this.textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim()) {
      this.classList.add("active-filter");
      console.log("Class Added");
    }
  })
}

<div>
  <div class=category> Birthdays </div>
  <div class=category> Anniversaries </div>
  <div class=category> Newborns </div>
  <div class=category> Weddings </div>
</div>

<ul>
  <li class="product-filter-items">Birthdays</li>
  <li class="product-filter-items">Weddings</li>
  <li class="product-filter-items">Newborns</li>
  <li class="product-filter-items">Anniversaries</li>
</ul>

Attempting to apply a class to selected elements, however, the conditional statement is not functioning as intended

Answer №1

Similar questions

Dealing with client-side exceptions in a Next.js 13 application's directory error handling

Is there a way to automatically recalculate the "Total Price" when the input values are adjusted?

Can the rxjs take operator be utilized to restrict the number of observables yielded by a service?

experiencing difficulty in transmitting HTML content through nodemailer

What could be causing my middleware to run twice?

Exploring characteristics using DocumentTraversal

Under what circumstances is it possible to iterate through an empty array?

Enhancing images by creating clickable sections in a more organized and efficient manner

Unable to open fancybox from a skel-layer menu

Is there a way to sort through a data object using a state array in React?

Failure of Ajax POST requests to refresh screen content

The script fails to execute on content loaded through AJAX in Django

The problem of a static click function not working when clicked on a link. What is the solution for this

Error: Angular7 Unable to locate namespace 'google'

Accessing Data from Nested PHP Array in Javascript

Oops! There was an issue while trying to serialize the props returned from getServerSideProps in "..." - we apologize for the inconvenience

What is the process for enabling HLS.js to retrieve data from the server side?

I am not forcing the Angular module to conform to my perspective

Ways to set Material UI tabs as active exclusively for particular URLs

The error message "require is undefined for Electron"