我的过滤器系统在 html 中出现 JS 错误

Question

我的 html 过滤器系统有问题。

这是错误：

未捕获的类型错误：无法在 scripts.js:40 处读取 null 的属性“getElementsByClassName”

系统可以工作，但我希望修复错误

filterSelection("all")

function filterSelection(c) {

  var x, i;

  x = document.getElementsByClassName("filterDiv");

  if (c == "all") c = "";

  for (i = 0; i < x.length; i++) {

    w3RemoveClass(x[i], "show");

    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");

  }

}

function w3AddClass(element, name) {

  var i, arr1, arr2;

  arr1 = element.className.split(" ");

  arr2 = name.split(" ");

  for (i = 0; i < arr2.length; i++) {

    if (arr1.indexOf(arr2[i]) == -1) {

      element.className += " " + arr2[i];

    }

  }

}

function w3RemoveClass(element, name) {

  var i, arr1, arr2;

  arr1 = element.className.split(" ");

  arr2 = name.split(" ");

  for (i = 0; i < arr2.length; i++) {

    while (arr1.indexOf(arr2[i]) > -1) {

      arr1.splice(arr1.indexOf(arr2[i]), 1);

    }

  }

  element.className = arr1.join(" ");

}

var btnContainer = document.getElementById("myBtnContainer");

var btns = btnContainer.getElementsByClassName("btn");

for (var i = 0; i < btns.length; i++) {

  btnContainer[i].innerHTML = Quotes[x]

  btns[i].addEventListener("click", function() {

    var current = document.getElementsByClassName("active");

    current[0].className = current[0].className.replace(" active", "");

    this.className += " active";

  });

}

Answer 1

这是一个奇怪的说法btnContainer[i].innerHTML&nbsp;=&nbsp;Quotes[x]如果它起作用了，你的按钮就会消失要在下面使用我的代码，您需要用名为 data-select 的数据属性替换 onclicks 并添加active到“all”按钮更改示例 div 以匹配他们的类display: none; /* Hidden by default */从 filterDiv 类中删除将 .show 更改为 .hide像这样.hide {&nbsp; display: none;}完整代码const filterSelection = sel => { // passing a string&nbsp;&nbsp; [...document.querySelectorAll(".filterDiv")].forEach(div => {&nbsp; &nbsp; div.classList.toggle("hide",&nbsp; &nbsp; &nbsp; sel !== "all" && !div.classList.contains(sel) // hide if not "all" and no match&nbsp; &nbsp; )&nbsp; })};window.addEventListener("load", function() { // when the page loads&nbsp; const btnContainer = document.getElementById("myBtnContainer");&nbsp; // btnContainer.innerHTML += Quotes[0]; // was x&nbsp; btnContainer.addEventListener("click", function(e) { // any click on the button container&nbsp; &nbsp; const tgt = e.target;&nbsp;&nbsp; &nbsp; if (tgt.classList.contains("btn")) { // check if tgt is a button&nbsp; &nbsp; &nbsp; filterSelection(tgt.getAttribute("data-select")); // grab the attribute&nbsp; &nbsp; &nbsp; const current = document.querySelector(".btn.active"); // get the active&nbsp; &nbsp; &nbsp; current.classList.remove("active"); // remove the active&nbsp; &nbsp; &nbsp; tgt.classList.add("active"); // add active to button clicked&nbsp; &nbsp; }&nbsp; })})filterSelection("all");&nbsp;body {&nbsp; &nbsp; background-color: #383838;}.Navbar {background-color: rgb(26, 25, 25);overflow: hidden;margin: -16px -8px;}.Navbar a {&nbsp; &nbsp; float: left;&nbsp; &nbsp; color: #f2f2f2;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; padding: 18px 20px;&nbsp; &nbsp; font-size: 15px;&nbsp; &nbsp; font-family: Arial;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; line-height: 20px;}.Navbar a:hover {&nbsp; &nbsp; background-color: #333;&nbsp; &nbsp; color: #f2f2f2;}&nbsp;.container {&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; font-family: Arial;&nbsp; &nbsp; font-size: 15px;&nbsp; &nbsp; font-weight: bold;&nbsp; }&nbsp;&nbsp;&nbsp; .filterDiv {&nbsp; &nbsp; float: left;&nbsp; &nbsp; background-color: rgb(26, 25, 25);&nbsp; &nbsp; color: #ffffff;&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; line-height: 100px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; margin: 4px;&nbsp; &nbsp; /* display: none; */ /* Hidden by default */&nbsp;&nbsp; }&nbsp; .hide {&nbsp; &nbsp; display: none;&nbsp; }&nbsp;&nbsp;&nbsp; /* Style the buttons */&nbsp; .btn {&nbsp; &nbsp; border: none;&nbsp; &nbsp; outline: none;&nbsp; &nbsp; padding: 12px 16px;&nbsp; &nbsp; background-color: rgb(31, 31, 31);&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; color: white;&nbsp; &nbsp; font-family: Arial;&nbsp; }&nbsp;&nbsp;&nbsp; /* Add a light grey background on mouse-over */&nbsp; .btn:hover {&nbsp; &nbsp; background-color: rgb(46, 46, 46);&nbsp; }&nbsp;&nbsp;&nbsp; /* Add a dark background to the active button */&nbsp; .btn.active {&nbsp; &nbsp; background-color: #666;&nbsp; &nbsp; color: rgb(31, 31, 31);&nbsp; }&nbsp; .navbar2 {&nbsp; &nbsp; background-color: rgb(31, 31, 31);&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; height: 40px;&nbsp; &nbsp; margin: 16px -8px;&nbsp; }&nbsp; a {&nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; }&nbsp; h1 {&nbsp; &nbsp; &nbsp; font-family: Arial;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; color: white;&nbsp; }&nbsp; .uiltje {&nbsp; &nbsp; &nbsp; margin: 20px -8px;&nbsp; }<div id="myBtnContainer">&nbsp; <button class="btn active" data-select="all"> Show all</button>&nbsp; <button class="btn" data-select="games"> Games</button>&nbsp; <button class="btn" data-select="ai"> AI</button>&nbsp; <button class="btn" data-select="tools"> Tools</button></div><div class="container">&nbsp; <div class="filterDiv tools">Sample Tool</div>&nbsp; <div class="filterDiv games">Sample Game</div>&nbsp; <div class="filterDiv ai">Sample AI</div></div>

Answer 2

您应该将 js 代码放在 html 代码之后的页脚中