Kevin Powell - Community•14mo ago

How to check if an element contains a class using JavaScript?

Hi all! Another question in regards to my stat module from before. I am trying to use JavaScript to check if the container contains the class "dark-bg" and then do something else. I have tried .matches() and classList.has() it keeps giving me an error. Any help would be grealy appreciated! https://codepen.io/rnkwill/pen/OJrzroj

Will

CodePen

OJrzroj

...

17 Replies

Chris Bolson•14mo ago

element.classList.contains(class)

rnkwillOP•14mo ago

^^ tried that before and it gives me this error

vince•14mo ago

Chris's answer is correct. Seems like that error is because you tried to access an element that doesn't exist. Is your querySelector correct?

Chris Bolson•14mo ago

In your code "statContainer" is an array so you will need to do a loop or define a specific selector to check. (I'm on the mobile so I can't really see what is happening)

rnkwillOP•14mo ago

I see. I had to step away but will try running a loop to check and will report back. I updated the code pen after running a loop in the function but now it keeps firing and not sure what can be causing that now.

rnkwillOP•14mo ago

https://codepen.io/rnkwill/pen/OJrzroj

Will

CodePen

OJrzroj

...

rnkwillOP•14mo ago

It keeps saying it has the class but only 1 of the containers has the class Any ideas anyone?

Chimi•14mo ago

statContainer is a NodeList, so you can't use matches on it, only on individual DOM elements

rnkwillOP•14mo ago

I reverted back to classList.contains but when I console log it returns the first node item in the list 3x. My code pen has been updated. The test class function behaves as it should but once I try to run the if else statement in the computedGradientForPercentage function it breaks. So it has something to do with that but I can’t quite figure out why. https://codepen.io/rnkwill/pen/OJrzroj

ἔρως•14mo ago

the class stat-value doesn't exist

ἔρως•14mo ago

rnkwillOP•14mo ago

Ugh. Sorry I need to update the code pen some more. Been flipping through so many things. The code pen has been updated to reflect all recent updates! Thanks for calling that out @ἔρως

ἔρως•14mo ago

it seems to be working i do see the numbers flipping

rnkwillOP•14mo ago

The number increase as they should. What needs to happen is if the div.stat-container has class dark-bg the circular progress bar turns white instead of grey. If see the first computedGradientForPercentage function it works as it should but if you comment that out and uncomment the second version of that function under it - it breaks.

ἔρως•14mo ago

ew you're doing it in javascript just use a css variable and update it you're making a huge tangled mess with javascript and css i think it's better if you refactor this to use css variables you will have a lot more success

Chris Bolson•14mo ago

Your observer is already looping through each of the circles so you don't need the computeGradientForPercentage() to loop through them all again - this ends up overwriting things. Try changing this line: circularProgress.style.background = computeGradientForPercentage(progressStartValue); to this so that it passes the current container within the "entries" loop: circularProgress.style.background = computeGradientForPercentage(container,progressStartValue); Then, update your computeGradientForPercentage() function to accept the container argument and just check if it contains the "dark-bg" class something like this:

function computeGradientForPercentage(el,percentage) {
    if(el.classList.contains("dark-bg")) {
      return `conic-gradient(#099bf0, #7cbf3d,#00b3cf, #1f58f2, #5618d4 ${percentage * 3.6}deg, #FFFFFF 0deg)`;
    } else {
      return `conic-gradient(#099bf0, #7cbf3d,#00b3cf, #1f58f2, #5618d4 ${percentage * 3.6}deg, #EAEAEC 0deg)`;
    }
}

function computeGradientForPercentage(el,percentage) {
    if(el.classList.contains("dark-bg")) {
      return `conic-gradient(#099bf0, #7cbf3d,#00b3cf, #1f58f2, #5618d4 ${percentage * 3.6}deg, #FFFFFF 0deg)`;
    } else {
      return `conic-gradient(#099bf0, #7cbf3d,#00b3cf, #1f58f2, #5618d4 ${percentage * 3.6}deg, #EAEAEC 0deg)`;
    }
}

ἔρως•14mo ago

or, just rewrite this all to use css and you update the variable something like this:

.stat-container {
  --percent: 0;
  background-image: conic-gradient(#099bf0, #7cbf3d,#00b3cf, #1f58f2, #5618d4 calc(var(--percent) * 3.6deg), var(--c-bg, #FFFFFF) 0deg);
}
.stat-container.bg-dark {
  --c-bg: #EAEAEC;
}

.stat-container {
  --percent: 0;
  background-image: conic-gradient(#099bf0, #7cbf3d,#00b3cf, #1f58f2, #5618d4 calc(var(--percent) * 3.6deg), var(--c-bg, #FFFFFF) 0deg);
}
.stat-container.bg-dark {
  --c-bg: #EAEAEC;
}

then, you just do element.style.setProperty('--percent', <value>)

Gaming

Programming

How to check if an element contains a class using JavaScript?