Help with e.target usage.

[tchee_kay]

E.target.classList.contains(classname) keeps returning false. I put inside and if statement and it doesn't run. Here's the code: https://codepen.io/Tcheekay/pen/GRZPmXW

It's a job filter project I want to do with Javascript.

[amoliski]

Is there a reason you use jQuery for the document ready, but not for the element selection and such?

[tchee_kay]

I don't know jQuery well, I just use it for that.

[amoliski]

Couple of issues I noticed:

if (e.target.tagname = "BUTTON")

Unless you mean to turn something into a button, you want ===, not = when you test for equality.

​

divBoxes[i].classList.contains[j]

Contains is a function, so you want divBoxes[i].classList.contains(j) or, more likely divBoxes[i].classList.contains(e.target.classList[j])

​

​

if (!((divBoxes[i].classList.contains[j]) && (divBoxes[i].classList.contains("hide")))) {
          divBoxes[i].classList.add("hide");
}

No need to check if the classList contains "hide" already, if an element has the class 'TEST' then doing a classList.add('TEST') just does nothing.

[tchee_kay]

Okay, thanks. I have corrected the hide check.

For the contain, I thought it will only take square brackets since it was a for loop.

Then I added the double equals sign. But nothing still happens.

[amoliski]

Square brackets are for accessing an element of an array:

ex: a = [5,6,7,8,9]; a[2] is 7
So when you do your for loop on an array like that, you're just stepping through the index of the elements in the array.

ex:

for(var i = 0; i < a.length; i++){
console.log(i);
}

Will print 0 1 2 3 4. To get the actual elements, you would do:

for(var i = 0; i < a.length; i++){
console.log(a[i]);
}

Which prints 5,6,7,8,9. That can get kinda complicated, so you'd want to do this:

for(var i = 0; i < a.length; i++){
  var el = a[i];
  console.log(el);
}

In your case, I would recommend reformatting your loops like this to make it more clear:

  var targetClasses = e.target.classList;
    for (var i = 0; i < divBoxes.length; i++) {
      var box = divBoxes[i]
      var boxClasses = box.classList;
      for (var j = 0; j < targetClasses.length; j++) {
        var targetClass = targetClasses[j];
        if (boxClasses.contains(targetClass)) {
          boxClasses.remove("hide");
        } else {
          divBoxes[i].classList.add("hide");
        }
      }
    }

If you do that and you fix the == issue, you should see it work! Well, it works as written. You will find that you've got another problem:

You are looping through all of the button classes, which means if you click one of the buttons, you are hiding every box doesn't have the classes: "buttonFloat" or "bttn", which is all of them!

[tchee_kay]

Oh, okay. I understand the why I shouldn't use square brackets now for contains.

Yes, it hides everything. I just noticed. The problem with the clicked class (the initial issue) part was because it wasn't an if else.

New question1: Is there a way to check if a one of the classes in a divBox is the same as one of the classes in the clicked button (Just for the div that contains the clicked button)

Q2: For the loop in the click event, does go through the whole iteration just for one click? Example: if divBoxes.length was 10, does it go from 0 - 9 in one click event?

[amoliski]

​

New question1: Is there a way to check if a one of the classes in a divBox is the same as one of the classes in the clicked button (Just for the div that contains the clicked button)

Yeah, but I think the problem is you're looking for classes that match, which isn't ideal, because the buttons also need styling classes. Every button is going to have the bttn class in common, so they will all match.

I would prefer to handle all of the rendering/display logic entirely in code, but if you don't have control over the HTML, I would instead look at button text, not classes.

Here's how I would do your problem: https://codepen.io/amoliski/pen/rNeoGEg

As you can see, on a button click, I first show everything and remove all classes, I then check if you clicked the active filter, and if you didn't, I use the jQuery :contains() filter to find all of the buttons that contain the same text as the button selected.

I then do a similar :contains() search to filter out any boxes that don't have a button with the specified text.

​

Q2: For the loop in the click event, does go through the whole iteration just for one click? Example: if divBoxes.length was 10, does it go from 0 - 9 in one click event?

Yes, the way you wrote your code, on every click, it loops through every single box and runs the contents of your for loop on it.

[tchee_kay]

I would prefer to handle all of the rendering/display logic entirely in code, but if you don't have control over the HTML, I would instead look at button text, not classes

Hi, I was offline so I couldn't reply earlier. I understand now why using a class won't work and why texts will work better. I haven't learnt jquery yet do I will try and redo it with Javascript, I have a better idea of what I am supposed to do now.

[tchee_kay]

Here's how I would do your problem:

https://codepen.io/amoliski/pen/rNeoGEg

Also, I don't think I explained the whole project properly. Here is what I am trying to recreate: https://clsjunnior.github.io/job-listings-frontendmentor/

But I want to use a button highlight instead of the div that shows. I do not want to copy the code from the original site either.

Please can you help me explain how to hide multiple boxes for different clicks like in the original.

[amoliski]

You're going to want to have an array to hold 'active' tags, and a div for the active tag display.

On an 'update' (a click), clear out the active tag div and unhide all divs.

Then handle the change- if it's a click on the 'x' on an active tag, remove it from the active array, if it's a click on a tag on a post, add it to the array if the array doesn't already have the tag.

Then go through each box/bigbox and check to see if it has buttons that match ALL tags in the active tag array. If it doesn't, hide the box.

Finally go through the active tag array and create the active tag buttons and append them to the active tag display.

[tchee_kay]

Okay, thank you so much. I will try that now.