Kevin Powell - Community•2y ago

Help with simple IF statement!

for(let i=0;i<filtersDiv.length;i++) {
        let selectedFilter;
        let filterOut = "";
        let clickCounter = 0;
        filtersDiv[i].addEventListener('click', () => {
            filterBox.classList.add('active-flex');
            container.style.top = "-90px";
            selectedFilter = filtersDiv[i].innerHTML;
            clickCounter++
            filterOut = `
            <div class="selected-filter-unit">
                <p class="selected-filter">${selectedFilter}</p>
                <button class="remove-filter"><img src="images/icon-remove.svg" alt="Remove icon"></button>
            </div>
            `;
            selectedFilters.innerHTML = selectedFilters.innerHTML + filterOut;
            removeFilterScript();
            // cardFilter();
        })
    }

for(let i=0;i<filtersDiv.length;i++) {
        let selectedFilter;
        let filterOut = "";
        let clickCounter = 0;
        filtersDiv[i].addEventListener('click', () => {
            filterBox.classList.add('active-flex');
            container.style.top = "-90px";
            selectedFilter = filtersDiv[i].innerHTML;
            clickCounter++
            filterOut = `
            <div class="selected-filter-unit">
                <p class="selected-filter">${selectedFilter}</p>
                <button class="remove-filter"><img src="images/icon-remove.svg" alt="Remove icon"></button>
            </div>
            `;
            selectedFilters.innerHTML = selectedFilters.innerHTML + filterOut;
            removeFilterScript();
            // cardFilter();
        })
    }

is part of the code that should contains IF that I'm having problem with

selectedFilters.innerHTML = selectedFilters.innerHTML + filterOut;

selectedFilters.innerHTML = selectedFilters.innerHTML + filterOut;

line of code that should have IF condition that should state: IF "selectedFilters.innerHTML" already has a div inside, with the same value of ${selectedFilter}, it should not add another div. So, no 2 same filters should be active at the same time. Please help. 😦

15 Replies

MarkBoots•2y ago

please give some more context. What is this doing / what should it do. maybe it's easier to help if you make a small example on codepen (only the relevant parts) because this is a bit messy and unclear

Dovah•2y ago

It just creates a new div inside of "selectedFilters" div. I need for it to not create same div's that have ${selectedFilter} part of the code same. I tried separating string for the value I need like this

let stringSplit = selectedFilters.innerHTML.split(">");
            console.log(selectedFilter.innerHTML)
            let strigSplitTwo = stringSplit[2];
            let slicedString = strigSplitTwo.slice(0, -3);

let stringSplit = selectedFilters.innerHTML.split(">");
            console.log(selectedFilter.innerHTML)
            let strigSplitTwo = stringSplit[2];
            let slicedString = strigSplitTwo.slice(0, -3);

But I'm messing up the order

MarkBoots•2y ago

again i think there will be a way easier approach if we have more clear what your app should do. so please provide a simple version on codepen so we can understand what it is.

Dovah•2y ago

I can't provide codepen since it pulls from json 😦 Or can i? Will try to write it up and copy JSON here

Dovah•2y ago

https://codepen.io/DovahTheKiin/pen/WNKjdgK

DovahTheKiin

CodePen

WNKjdgK

...

Dovah•2y ago

this is the whole JS It takes JSON, add divs. Later, when clicked on one of those divs new section will pop-up where that clicked div will appear (literally filters on any website), and what I was asking in code above is for those filters, when clicked to not repeat. So no 2 same filters in that above section Kinda hard to just send a part of code

Dovah•2y ago

https://www.frontendmentor.io/challenges/job-listings-with-filtering-ivstIPCt

Frontend Mentor

Frontend Mentor | Job listings with filtering coding challenge

In this challenge, you'll be using JavaScript to filter out jobs based on selected categories. We provide a local JSON file to help you practice working with JSON data.

Dovah•2y ago

This is the project YOu can see filters in one of the pictures

MarkBoots•2y ago

okay, now i get a bit more what you want. the trick here is to keep track of what filters are already in use. create an global variable array const filters = [] where you can store the clicked categories (only the names) When you click on a category within a joblisting, check if the name already exists in that array filters.includes(name). If so, do nothing, otherwise add it to the array. --edit. I just created an example with the full logic (no styling). Don't check if you don't want it https://codepen.io/MarkBoots/pen/gOjWKzQ

Dovah•2y ago

Oh wait you did even the next step NiceeexD I will save it to study it I did find a way for my previous question Next hurdle was to show only filtered jobs But you already did it so if I can't figure it out will borrow your solution xD

if(clickCounter === 0) {
            selectedFilters.innerHTML = selectedFilters.innerHTML + filterOut;
            clickCounter = clickCounter + 1;
            } else if (clickCounter > 0) {
                const selectedFilterParagraph = document.querySelector(".selected-filter")
            for(let i=0;i<selectedFilterParagraph.length;i++){
                if(selectedFilterParagraph[i].innerHTML === selectedFilter) {
                    return;
                } else {
                    selectedFilters.innerHTML = selectedFilters.innerHTML + filterOut;
                }
            }
            }

if(clickCounter === 0) {
            selectedFilters.innerHTML = selectedFilters.innerHTML + filterOut;
            clickCounter = clickCounter + 1;
            } else if (clickCounter > 0) {
                const selectedFilterParagraph = document.querySelector(".selected-filter")
            for(let i=0;i<selectedFilterParagraph.length;i++){
                if(selectedFilterParagraph[i].innerHTML === selectedFilter) {
                    return;
                } else {
                    selectedFilters.innerHTML = selectedFilters.innerHTML + filterOut;
                }
            }
            }

This is what II added to my codew Either way thanks for the help! DOn't delete codepen please since I will most likely need it! 😄 And want to see how you did it, since it's much more easier I guess

if(filters.every(filter => labels.includes(filter))){
      job.classList.remove("hide");
    } else {
      job.classList.add("hide")
    }

if(filters.every(filter => labels.includes(filter))){
      job.classList.remove("hide");
    } else {
      job.classList.add("hide")
    }

THis is the filterin of job cards themselves right?

MarkBoots•2y ago

you can fork the pen to your own to be safe ( i will remove it in a coupe of days) yes inside the job card it will check if all active filter names are present within the labels of that job

Dovah•2y ago

Will need to study it more I copied your code so you can delete the codepen Can I DM you if I have problems understanding it in the future? @MarkBoots Either way thanks a lot for helping me! I will need to study it properly since I'm having hard time with mine xD

MarkBoots•2y ago

no sorry, but i don't respond to dm's for help. This discord is the place where I am when I have time. Also, there a lots of others that can help as well. So please keep it here

Dovah•2y ago

Roger!

MarkBoots•2y ago

You're welcome and good luck!

Gaming

Programming

Help with simple IF statement!