Adding CSS class in Vanilla JS to querySelectorAll results

JavaScript
22

Check the link to Element.classList again – there’s also a .remove() method… ;-)

if (event.target.value === 'condition_2') {
  classOne.classList.add('newclass')
} else {
  classOne.classList.remove('newclass')  
}

You might also conditionally .toggle() the class, which would be more elegant but sadly also without IE support…

classOne.classList.toggle(
  'newclass', 
  event.target.value === 'condition_2'
)

Currently the select.value gets only checked on change events, so you’d have to do this initially too:

var checkSelect = function () {
  if (select.value === 'condition_2') {
    classOne.classList.add('newclass')
  } else {
    classOne.classList.remove('newclass')  
  }
}

// Do the check initially...
checkSelect()
// ... and on change events
select.addEventListener('change', checkSelect)
2 Likes
23

This doesn’t needs to get enveloped in any curly brackets etc?

24

Why where should there be curly braces? The first line is a regulare function call, in the second line that function gets passed to .addEventListener(). You’ll often see an anonymous function here, like in the previous examples…

select.addEventListener('change', function () {
  // ...
})

… but you can just as well assign that function to a variable (so that it can be used elsewhere too), and then pass in that variable like any other argument.

1 Like
25

Hi there,

I am a bit confused. I have little or almost negligible training in this. the one that you taught me above where should I fit that in this →

var checkSelect = function () {
  if (select.value === 'condition_2') {
    classOne.classList.add('newclass')
  } else {
    classOne.classList.remove('newclass')  
  }
}

Thanks!

26

Well I just meant that these two are mostly equivalent…

select.addEventListener('change', function () {
  if (select.value === 'condition_2') {
    classOne.classList.add('newclass')
  } else {
    classOne.classList.remove('newclass')  
  }
})

var checkSelect = function () {
  if (select.value === 'condition_2') {
    classOne.classList.add('newclass')
  } else {
    classOne.classList.remove('newclass')  
  }
}

select.addEventListener('change', checkSelect)

… except that in the latter case, you can also call that function directly to perform the check initially:

checkSelect()

PS: For the sake of completeness, a function declaration would of course work too:

function checkSelect () {
  if (select.value === 'condition_2') {
    classOne.classList.add('newclass')
  } else {
    classOne.classList.remove('newclass')  
  }
}

checkSelect()
select.addEventListener('change', checkSelect)
1 Like
27 
<select class="flex_select">
    <option value="con_1">One</option>
    <option value="con_2" selected="selected">Two</option>
    <option value="con_3">Three</option>
</select>

function checkSelect () {
  if (event.target.value === 'con_2') {
     classTwo.classList.add('class_2')
 }else if (event.target.value === 'con_3') {
     classTwo.classList.add('class_3')
 }else if (event.target.value === 'con_1') {
     classTwo.classList.remove('class_3', 'class_2')
 }
}

checkSelect()
select.addEventListener('change', checkSelect)

Can some one tell me where am I going wrong?

28

Is select defined?

EDIT: Sorry, missed it in the first post. We’ve suddenly changed from classOne to classTwo… is THAT defined? How is it defined? Are there more than one objects that have matched your selector?

29

No. what should we do there?

30

… asked 3 questions, got “no” as answer.
Response unclear. Please refine.

31

I do not know I have shown you and that is the only code that I have.

There is only one selector, which I previously using it like this →

var classTwo = document.querySelector('.flex_parent')

32

Ok, but is there more than one thing on the page with the class “flex_parent”? The code… looks correct… but if the classTwo targetter is aiming at the wrong element, you may be changing the class of something you didnt mean to.

1 Like
33

situation is like this →

<div class="flex_parent"></div>

condition 2 true:

<div class="flex_parent class2"></div>

condition 3 true:

<div class="flex_parent class2 class3"></div>

Did you get it?

When the page loads for the first time, this should exist:

condition 2 true:

<div class="flex_parent class2"></div>

34

Yes, i understand how the code works.

My point is this.

<p class="flex_parent">Some super stuff</p>
<p>Some stuff</p>
<p>Some more stuff</p>
<div class="flex_parent"></div>

<script>
var temp = document.querySelector('.flex_parent');
</script>

temp at this point points at the P, NOT the DIV.

35

where does P comes from this is the case →

<select class="flex_select">
    <option value="con_1">One</option>
    <option value="con_2" selected="selected">Two</option>
    <option value="con_3">Three</option>
</select>

Div is like this →

    <div class="flex_parent">

Idea is to inject class when certain condition is true and then remove when certain other condition true.
Condition 2 situation is default condition.

36

Again. I understand the idea. I understand the code.
You’re telling us the code doesnt work. We’re trying to find out why. Because it does work.

Is the div, and the definition of classTwo, the only times in your code the word “flex_parent” exists?
EDIT: Copy and paste your entire HTML, and we’ll diagnose the problem.

1 Like
37 
<select class="flex_select">
    <option value="con_1">One</option>
    <option value="con_2" selected="selected">Two</option>
    <option value="con_3">Three</option>
</select>

code:

<div class="flex_parent">
Some code
<div>

JS

function checkSelect () {
  var select = document.querySelector('select') // use more specific selector here
  var classTwo = document.querySelector('.flex_parent')
  if (event.target.value === 'con_2') {
     classTwo.classList.add('flex_parent_2')
 }else if (event.target.value === 'con_3') {
     classTwo.classList.add('flex_parent_3')
 }else if (event.target.value === 'cond_1') {
     classTwo.classList.remove('flex_parent_3', 'flex_parent_2')
 }
}

checkSelect()
select.addEventListener('change', checkSelect)
38

That’s not an entire HTML page.
Copy. and paste. the entire. HTML.

1 Like
39

Copy right issue not possible.

40

then diagnosis not possible.

“The cog in this machine doesnt work” “Show us the machine” “I cant”… i mean…

41

1000×865 107 KB