javascript - 我的 html 过滤系统出现 JS 错误

Question

您好，我的 html 过滤系统有问题。

这是错误:

Uncaught TypeError: Cannot read property 'getElementsByClassName' of null at scripts.js:40

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

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";
  });
}

body {
  background-color: #383838;
}

.Navbar {
  background-color: rgb(26, 25, 25);
  overflow: hidden;
  margin: -16px -8px;
}

.Navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  padding: 18px 20px;
  font-size: 15px;
  font-family: Arial;
  font-weight: bold;
  line-height: 20px;
}

.Navbar a:hover {
  background-color: #333;
  color: #f2f2f2;
}

.container {
  overflow: hidden;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
}

.filterDiv {
  float: left;
  background-color: rgb(26, 25, 25);
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 4px;
  display: none;
  /* Hidden by default */
}


/* The "show" class is added to the filtered elements */

.show {
  display: hide;
}


/* Style the buttons */

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: rgb(31, 31, 31);
  cursor: pointer;
  color: white;
  font-family: Arial;
}


/* Add a light grey background on mouse-over */

.btn:hover {
  background-color: rgb(46, 46, 46);
}


/* Add a dark background to the active button */

.btn.active {
  background-color: #666;
  color: rgb(31, 31, 31);
}

.navbar2 {
  background-color: rgb(31, 31, 31);
  overflow: hidden;
  height: 40px;
  margin: 16px -8px;
}

a {
  text-decoration: none;
}

h1 {
  font-family: Arial;
  text-align: center;
  color: white;
}

.uiltje {
  margin: 20px -8px;
}

<div id="myBtnContainer">
  <button class="btn" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('games')"> Games</button>
  <button class="btn" onclick="filterSelection('ai')"> AI</button>
  <button class="btn" onclick="filterSelection('tools')"> Tools</button>
</div>


<div class="container">
  <div class="filterDiv tools">Slimleren</div>
  <div class="filterDiv games">SampleGame</div>
  <div class="filterDiv ai">SampleTool</div>


</div>

Answer 1

这是一个奇怪的说法

btnContainer[i].innerHTML = Quotes[x]

如果它起作用了，你的按钮就会消失

要使用下面的代码，您需要

• 用名为 data-select 的数据属性替换 onclicks，并将 active 添加到“全部”按钮

• 更改示例 div 以匹配其类

• 删除显示:无；/* 默认隐藏 */ 来自filterDiv 类
• 将 .show 更改为 .hide

像这样

.hide {
  display: none;
}

完整代码

const filterSelection = sel => { // passing a string 
  [...document.querySelectorAll(".filterDiv")].forEach(div => {
    div.classList.toggle("hide",
      sel !== "all" && !div.classList.contains(sel) // hide if not "all" and no match
    )
  })
};
window.addEventListener("load", function() { // when the page loads
  const btnContainer = document.getElementById("myBtnContainer");
  // btnContainer.innerHTML += Quotes[0]; // was x
  btnContainer.addEventListener("click", function(e) { // any click on the button container
    const tgt = e.target; 
    if (tgt.classList.contains("btn")) { // check if tgt is a button
      filterSelection(tgt.getAttribute("data-select")); // grab the attribute
      const current = document.querySelector(".btn.active"); // get the active
      current.classList.remove("active"); // remove the active
      tgt.classList.add("active"); // add active to button clicked
    }
  })
})
filterSelection("all");

 body {
    background-color: #383838;

}



.Navbar {
background-color: rgb(26, 25, 25);
overflow: hidden;
margin: -16px -8px;
}


.Navbar a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    padding: 18px 20px;
    font-size: 15px;
    font-family: Arial;
    font-weight: bold;
    line-height: 20px;
}

.Navbar a:hover {
    background-color: #333;
    color: #f2f2f2;
} 


.container {
    overflow: hidden;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
  }
  
  .filterDiv {
    float: left;
    background-color: rgb(26, 25, 25);
    color: #ffffff;
    width: 100px;
    line-height: 100px;
    text-align: center;
    margin: 4px;
    /* display: none; */ /* Hidden by default */ 
  }



  .hide {
    display: none;
  }
  
  /* Style the buttons */
  .btn {
    border: none;
    outline: none;
    padding: 12px 16px;
    background-color: rgb(31, 31, 31);
    cursor: pointer;
    color: white;
    font-family: Arial;
  }
  
  /* Add a light grey background on mouse-over */
  .btn:hover {
    background-color: rgb(46, 46, 46);
  }
  
  /* Add a dark background to the active button */
  .btn.active {
    background-color: #666;
    color: rgb(31, 31, 31);
  }

  .navbar2 {
    background-color: rgb(31, 31, 31);
    overflow: hidden;
    height: 40px;
    margin: 16px -8px;
  }





  a {
      text-decoration: none;



  }

  h1 {
      font-family: Arial;
      text-align: center;
      color: white;



  }

  .uiltje {
      margin: 20px -8px;




  }

<div id="myBtnContainer">
  <button class="btn active" data-select="all"> Show all</button>
  <button class="btn" data-select="games"> Games</button>
  <button class="btn" data-select="ai"> AI</button>
  <button class="btn" data-select="tools"> Tools</button>
</div>


<div class="container">
  <div class="filterDiv tools">Sample Tool</div>
  <div class="filterDiv games">Sample Game</div>
  <div class="filterDiv ai">Sample AI</div>
</div>