filter函数将一个名为hide的类添加到每个不满足选择条件的卡。问题是你还没有定义这个类做什么。如果加上
.hide { display: none; }
到你的CSS它会工作。下面的工作示例使用“学院”作为过滤器。

let schools = {
data: [{
    schoolName: "Edmonton Catholic School District",
    category: "Catholic",
    image: "ecsd.png"
  },
  {
    schoolName: "Edmonton Public School",
    category: "Regular",
    image: "publicimg.jpg"
  },
  {
    schoolName: "Northern Alberta Institution of Technology",
    category: "College",
    image: "NAIT.png"
  },
  {
    schoolName: "University of Alberta",
    category: "University",
    image: "University-of-Alberta.png"
  },
],
};

for (let i of schools.data) {
//Create Card
let card = document.createElement("div");

//Card category and should be hidden
card.classList.add("card", i.category, "hide");

//Image div
let imgContainer = document.createElement("div");
imgContainer.classList.add("image-container");

//img tag
let image = document.createElement("img");
image.setAttribute("src", i.image);
imgContainer.appendChild(image);
card.appendChild(imgContainer);

//container
let container = document.createElement("div");
container.classList.add("container");

//School name
let name = document.createElement("h5");
name.classList.add("school-name");
name.innerText = i.schoolName.toUpperCase();
container.appendChild(name);

card.appendChild(container);
document.getElementById("schools").appendChild(card);
}

function filterSchool(value) {

let elements = document.querySelectorAll(".card");
elements.forEach((element) => {
  if (value == "all") {
    element.classList.remove("hide");
  } else {
    if (element.classList.contains(value)) {
      element.classList.remove("hide");
    } else {
      element.classList.add("hide");
    }
  }
});
}

window.onload = () => {
filterSchool("College");
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: white;
}

button {
  cursor: pointer;
}

.wrapper {
  position: absolute;
  top: 5%;
  left: 20%;
  width: 95%;
  margin: 0 auto;
}

.button-value {
  border: 2px solid black;
  padding: 0.5px 10px;
  border-radius: 3em;
  background-color: transparent;
  transition: 0.3s ease-in-out;
}

.button-value:focus {
  background-color: black;
  color: white;
}

#schools {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 1.5em;
  padding: 2em 0;
}

.card {
  background-color: white;
  max-width: 18em;
  margin-top: 1em;
  padding: 1em;
  border-radius: 5px;
  box-shadow: 1em 2em 2.5em rgba(0, 0, 0, 0.19);
}

.image-container {
  text-align: center;
}

img {
  max-width: 100%;
  object-fit: contain;
  height: 15em;
}

.container {
  padding-top: 1em;
  color: black;
}

/* added this */
.hide {
  display:none;
}

@media screen and (max-width: 720px) {
  img {
    max-width: 100%;
    object-fit: contain;
    height: 10em;
  }
  .card {
    max-width: 10em;
    margin-top: 1em;
  }
  #schools {
    grid-template-columns: auto auto;
    grid-column-gap: 1em;
  }
}

<div class="wrapper">
    <div id="buttons">
      <button class="button-value" onclick="filterSchool('all')">All</button>
      <button class="button-value" onclick="filterSchool('Catholic')">Catholic School</button>
      <button class="button-value" onclick="filterSchool('Regular')">Regular School</button>
      <button class="button-value" onclick="filterSchool('University')">University</button>
      <button class="button-value" onclick="filterSchool('College')">College</button>
    </div>
    <div id="schools"></div>
  </div>

错误是

Error: {
      "message": "Uncaught ReferenceError: windows is not defined",
      "filename": "https://stacksnippets.net/js",
      "lineno": 175,
      "colno": 1
    }

它显示的原因是因为windows不是正确的函数是window