My Personal Portfolio Website - Need Help Debugging a Search Filter Feature

Projects Portfolio Project: Personal Portfolio Website
1

Hello!

Here is the github link to my project:

I have spent many hours on this seemingly simple website. I am sure many of you can relate.
Simply making the buttons change colors when you press them… and then reset when you press them again…

Well, I wanted to create a basic “store” page with buttons to filter items.
(This can be found in the /searchengine/ folder)
Note: I realize the buttons overflow if the screen is too narrow but haven’t added media queries yet.

The project is called “Shape Land”. There is a collection of shapes and colors that can be filtered by clicking buttons.

To do this, I created a function called setFilter().
When you click a button, the corresponding items should disappear, ie Red should make red shapes disappear.
This is based on JS reading checkboxes with the .checked property. if .checked === true, etc.

For ease of access, here is the JS function:

function setFilter() {
        for (let k=0; k < filterChecks.length; k++) {
            if (k === 0 && filterChecks[k].checked === true) {
                for (let j=0; j < redShapes.length; j++)
                redShapes[j].style.display = 'none'
            } 
            if (k === 0 && filterChecks[k].checked === false) {
                for (let j=0; j < redShapes.length; j++)
                redShapes[j].style.display = 'block';
            } 
            if (k === 1 && filterChecks[k].checked === true) {
                for (let j=0; j < blueShapes.length; j++)
                blueShapes[j].style.display = 'none';
        } 
            if (k === 1 && filterChecks[k].checked === false) {
                for (let j=0; j < blueShapes.length; j++)
                blueShapes[j].style.display = 'block';
        } 
            if (k === 2 && filterChecks[k].checked === true) {
                for (let j=0; j < orangeShapes.length; j++)
                orangeShapes[j].style.display = 'none';
        } 
            if (k === 2 && filterChecks[k].checked === false) {
                for (let j=0; j < orangeShapes.length; j++)
                orangeShapes[j].style.display = 'block';
        } 
            if (k === 3 && filterChecks[k].checked === true) {
                for (let j=0; j < squareShapes.length; j++)
                squareShapes[j].style.display = 'none';
        } 
            if (k === 3 && filterChecks[k].checked === false) {
                for (let j=0; j < squareShapes.length; j++)
                squareShapes[j].style.display = 'block';
        } 
            if (k === 4 && filterChecks[k].checked === true) {
                for (let j=0; j < circleShapes.length; j++)
                circleShapes[j].style.display = 'none';
        } 
            if (k === 4 && filterChecks[k].checked === false) {
                for (let j=0; j < circleShapes.length; j++)
                circleShapes[j].style.display = 'block';
        } 
            if (k === 5 && filterChecks[k].checked === true) {
                for (let j=0; j < rectangleShapes.length; j++)
                rectangleShapes[j].style.display = 'none';
        } 
            if (k === 5 && filterChecks[k].checked === false) {
                for (let j=0; j < rectangleShapes.length; j++)
                rectangleShapes[j].style.display = 'block';
        } 
    }
 }

It is boggling my mind that:

  • The function worked perfectly for the colors before I added the shapes,
  • Now the function works perfectly for the shapes, but not for the colors, despite being in the same function, and in the same array…
  • If I add console.log(redShapes[j]); below redShapes[j].style.display… it brings back an error that redShapes[j] doesn’t exist, BUT it makes the button actually work! The problem is, all the other buttons are then dysfunctional.

I have checked arrays and made sure everything is in the correct order, I have console logged to make sure everything exists and the .checked properties are working properly, I think I have done all of the syntax revision but have not found the reason for the functions misbehavior.

I have spent hours and hours trying to figure this out and to any who can help I am be immensely grateful!

Thank you

1 Like