KPC
Kevin Powell - Community•2y ago
Dovah

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
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
DovahOP•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
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
DovahOP•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
DovahOP•2y ago
Dovah
DovahOP•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
DovahOP•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
DovahOP•2y ago
This is the project YOu can see filters in one of the pictures
MarkBoots
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
DovahOP•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
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
DovahOP•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
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
DovahOP•2y ago
Roger!
MarkBoots
MarkBoots•2y ago
You're welcome and good luck!

Did you find this page helpful?