I'm trying to capture the elements that do not contain a display type of none.
let pfCard = document.getElementsByClassName("PortfolioCard").style.display = 'block';
This doesn't seem to be working as I believe it is attempting to modify the style type instead of retrieve it.
You can do this by getting all your elements by class name and then using filter on that list.
const blockElements = [...document.getElementsByClassName("PortfolioCard")].filter(x => x.style.display == "block");
console.log(blockElements.length);<div class="PortfolioCard" style="display:block">block</div>
<div class="PortfolioCard">not block</div>
<div class="PortfolioCard" style="display:block">block</div>You'd probably have to querySelectorAll(".PortfolioCard") to get an array of them, then .filter() the array looking for style.display != 'none'.
A nicer solution would be if you separate your display: none property into a small utility class like: .hide-portfolio { display: none; }, and hide them that way. Then you can search for them with querySelectorAll(".PortfolioCard:not(.hide-portfolio)");
Maybe this one?
console.log([...document.getElementsByClassName("PortfolioCard")].filter(item=> window.getComputedStyle(item).getPropertyValue('display') != "block"))<div class='PortfolioCard' style='display:block'></div>
<div class="PortfolioCard" style="display:block"></div>
<div class="PortfolioCard" style='display:none'></div>Or usearray.forEach:
let arr= [];
[...document.getElementsByClassName("PortfolioCard")].forEach(item=>{
if(window.getComputedStyle(item).getPropertyValue('display') != "block")
arr.push(item)
})
console.log(arr)<div class='PortfolioCard' style='display:block'></div>
<div class="PortfolioCard" style="display:block"></div>
<div class="PortfolioCard" style='display:none'></div>