Html - JavaScript - Select all wich have :not()

FullStackCreator
October 14, 2023
258 views
0 votes
2 Answers

I try to call a variable within the querySelectorAll() Method. It doesn’t work out.

function _hide() {
        
        //Returns as string which corresponds exactly to the Class I want to store

        let _toShow = "." + document.getElementById("fb-select").value;
        
        //Should store a Nodelist wich contains evrything except the class to show

        let card = document.querySelectorAll('.card:not(_toShow)')

        //Hides the elements in the Nodelist
        card.forEach((card) => {
            card.style.scale = "0";
            card.style.opacity = "0";
        });
    }

The Usecase is to hide all Elements wich have not a specific Class.
Thanks for Advice.

Answers

- Zelo
- October 14, 2023 at 12:12 pm
- 0 votes
0
If _toShow is a class, you had to select it like so:
```
let card = document.querySelectorAll('.card:not(._toShow)')
```
Login or Signup to reply.

It looks like your problem was that you were presenting _toShow as a literal string instead of a variable. Try breaking it out with plus signs in the queerySelectorAll func.

Another possible issue is that you weren’t resetting the styles of previous cards before setting styles on the selected one(s). I used the colors red and black to demonstrate. Depending on what you’re doing, this might not be applicable.

function _hide() {

  //Returns as string which corresponds exactly to the Class I want to store
  let _toShow = "." + document.getElementById("fb-select").value;

  //Should store a Nodelist wich contains evrything except the class to show
  let cards = document.querySelectorAll('.card:not(' + _toShow + ')')

  let allCards = document.querySelectorAll('.card');
  allCards.forEach((card) => {
    card.style.color = "black";
  });

  //Hides the elements in the Nodelist
  cards.forEach((card) => {
      card.style.color = "red";
  });
}

document.getElementById("fb-select").addEventListener("change", function(){
  _hide();
});

_hide();

.cardCont{
 display: flex;
}

.card{
  border-radius:15px;
  border: solid 1px #000;
  height: 200px;
  width: 145px;
}

<select id="fb-select">
  <option name="foo">foo</option>
  <option name="bar">bar</option>
  <option name="biz">biz</option>
</select>
<div class="cardCont">
<div class="foo card">Foo</div>
<div class="bar card">Bar</div>
<div class="biz card">Biz</div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – JavaScript – Select all wich have :not()

Answers