Catch div which has class name and has css attribute with specific value

March 30, 2022

I use this code to add values that has class name. Jsfiddle. I specifically want to add values of divs with class name box and has css attribute display block.

var test = document.getElementsByClassName("box");
var sum = 0;
for (i = 0; i < test.length; i++) {
  sum += parseInt(test[i].textContent);
}
console.log(sum);

>Solution :

This link has an answer
https://stackoverflow.com/a/5898748/8678978

Based on your fiddle, you want to check for a specific css class name. You do this with element.classList.contains(class) or more specifically; if (test[i].classList.contains('block'))

Since the css class .block has display: block you don’t need to check for that specific attribute, just the class.

var test = document.getElementsByClassName("box");

var sum = 0;

for (i = 0; i < test.length; i++) {
  if (test[i].classList.contains('block')) {
    sum += parseInt(test[i].textContent);
  }
}

console.log(sum);